CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-h5

H5/Web platform runtime and components for UniApp cross-platform development framework

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

network.mddocs/

Network Requests

HTTP request capabilities including standard requests, file uploads/downloads, and WebSocket connections with comprehensive configuration options, task management, and progress tracking.

Capabilities

HTTP Requests

Make HTTP requests with full control over headers, methods, data format, and response handling.

/**
 * Make HTTP request
 * @param options - Request configuration
 * @returns RequestTask for managing the request
 */
function request(options: RequestOptions): RequestTask;

interface RequestOptions {
  /** Request URL */
  url: string;
  /** Request data */
  data?: any;
  /** Request headers */
  header?: Record<string, string>;
  /** HTTP method */
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'CONNECT' | 'HEAD' | 'OPTIONS' | 'TRACE';
  /** Request timeout in milliseconds */
  timeout?: number;
  /** Expected data type for parsing response */
  dataType?: 'json' | 'text' | 'base64' | 'arraybuffer';
  /** Response type */
  responseType?: 'text' | 'arraybuffer';
  /** Enable HTTP2 */
  enableHttp2?: boolean;
  /** Enable QUIC */
  enableQuic?: boolean;
  /** Enable cache */
  enableCache?: boolean;
  /** Enable HTTP DNS */
  enableHttpDNS?: boolean;
  /** HTTP DNS service ID */
  httpDNSServiceId?: string;
  /** Enable chunk encoding */
  enableChunked?: boolean;
  /** Force cellular network */
  forceCellularNetwork?: boolean;
  /** Success callback */
  success?: (result: RequestSuccessResult) => void;
  /** Failure callback */
  fail?: (result: RequestFailResult) => void;
  /** Completion callback */
  complete?: (result: any) => void;
}

interface RequestSuccessResult {
  /** Response data */
  data: any;
  /** HTTP status code */
  statusCode: number;
  /** Response headers */
  header: Record<string, string>;
  /** Response cookies */
  cookies: string[];
  /** Profile information */
  profile?: RequestProfile;
}

interface RequestFailResult {
  /** Error message */
  errMsg: string;
  /** Error code */
  errno?: number;
}

interface RequestTask {
  /** Abort the request */
  abort(): void;
  /** Listen for response headers */
  onHeadersReceived(callback: (result: HeadersReceivedResult) => void): void;
  /** Remove headers received listener */
  offHeadersReceived(callback?: (result: HeadersReceivedResult) => void): void;
}

interface HeadersReceivedResult {
  /** Response headers */
  header: Record<string, string>;
}

interface RequestProfile {
  /** Redirect start time */
  redirectStart: number;
  /** Redirect end time */
  redirectEnd: number;
  /** Fetch start time */
  fetchStart: number;
  /** Domain lookup start time */
  domainLookupStart: number;
  /** Domain lookup end time */
  domainLookupEnd: number;
  /** Connect start time */
  connectStart: number;
  /** Connect end time */
  connectEnd: number;
  /** SSL handshake start time */
  SSLHandshakeStart: number;
  /** SSL handshake end time */
  SSLHandshakeEnd: number;
  /** Request start time */
  requestStart: number;
  /** Response start time */
  responseStart: number;
  /** Response end time */
  responseEnd: number;
  /** Response size */
  rtt: number;
  /** Estimate network type */
  estimate_nettype: number;
  /** HTTP version */
  httpVersion: string;
  /** Protocol */
  protocol: string;
}

Usage Examples:

import { request } from "@dcloudio/uni-h5";

// Simple GET request
const response = await new Promise((resolve, reject) => {
  request({
    url: 'https://api.example.com/users',
    method: 'GET',
    success: resolve,
    fail: reject
  });
});

// POST request with JSON data
request({
  url: 'https://api.example.com/users',
  method: 'POST',
  header: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  },
  data: {
    name: 'John Doe',
    email: 'john@example.com'
  },
  success(result) {
    console.log('User created:', result.data);
  },
  fail(error) {
    console.error('Request failed:', error);
  }
});

// Request with timeout and custom headers
const requestTask = request({
  url: 'https://api.example.com/data',
  timeout: 10000,
  header: {
    'X-API-Key': 'your-api-key',
    'Accept': 'application/json'
  },
  success(result) {
    if (result.statusCode === 200) {
      // Handle successful response
      console.log('Data:', result.data);
    }
  }
});

// Monitor headers and abort if needed
requestTask.onHeadersReceived((result) => {
  console.log('Headers received:', result.header);
  if (result.header['content-length'] > 1000000) {
    requestTask.abort(); // Abort large responses
  }
});

// File download with progress
request({
  url: 'https://example.com/large-file.pdf',
  responseType: 'arraybuffer',
  success(result) {
    // Handle binary data
    const blob = new Blob([result.data], { type: 'application/pdf' });
    // Save or process the file
  }
});

File Downloads

Download files with progress tracking and resume capabilities.

/**
 * Download file from remote server
 * @param options - Download configuration
 * @returns DownloadTask for managing the download
 */
function downloadFile(options: DownloadFileOptions): DownloadTask;

interface DownloadFileOptions {
  /** File URL to download */
  url: string;
  /** Request headers */
  header?: Record<string, string>;
  /** Local file path to save (optional) */
  filePath?: string;
  /** Request timeout in milliseconds */
  timeout?: number;
  /** Success callback */
  success?: (result: DownloadFileSuccessResult) => void;
  /** Failure callback */
  fail?: (result: any) => void;
  /** Completion callback */
  complete?: (result: any) => void;
}

interface DownloadFileSuccessResult {
  /** Local file path where file was saved */
  tempFilePath: string;
  /** HTTP status code */
  statusCode: number;
  /** Profile information */
  profile?: RequestProfile;
}

interface DownloadTask {
  /** Abort the download */
  abort(): void;
  /** Listen for download progress */
  onProgressUpdate(callback: (result: DownloadProgressResult) => void): void;
  /** Remove progress listener */
  offProgressUpdate(callback?: (result: DownloadProgressResult) => void): void;
  /** Listen for response headers */
  onHeadersReceived(callback: (result: HeadersReceivedResult) => void): void;
  /** Remove headers received listener */
  offHeadersReceived(callback?: (result: HeadersReceivedResult) => void): void;
}

interface DownloadProgressResult {
  /** Download progress percentage (0-100) */
  progress: number;
  /** Total bytes expected to receive */
  totalBytesExpectedToWrite: number;
  /** Bytes already written */
  totalBytesWritten: number;
}

Usage Examples:

import { downloadFile } from "@dcloudio/uni-h5";

// Download with progress tracking
const downloadTask = downloadFile({
  url: 'https://example.com/documents/report.pdf',
  success(result) {
    console.log('Downloaded to:', result.tempFilePath);
    // File is saved in temporary location
  },
  fail(error) {
    console.error('Download failed:', error);
  }
});

// Monitor download progress
downloadTask.onProgressUpdate((result) => {
  console.log(`Download progress: ${result.progress}%`);
  // Update UI progress bar
  updateProgressBar(result.progress);
});

// Cancel download if needed
setTimeout(() => {
  downloadTask.abort();
}, 30000); // Cancel after 30 seconds

File Uploads

Upload files with progress tracking and multi-part form data support.

/**
 * Upload file to remote server
 * @param options - Upload configuration
 * @returns UploadTask for managing the upload
 */
function uploadFile(options: UploadFileOptions): UploadTask;

interface UploadFileOptions {
  /** Upload URL */
  url: string;
  /** Local file path to upload */
  filePath: string;
  /** Form field name for the file */
  name: string;
  /** Request headers */
  header?: Record<string, string>;
  /** Additional form data */
  formData?: Record<string, any>;
  /** Request timeout in milliseconds */
  timeout?: number;
  /** Success callback */
  success?: (result: UploadFileSuccessResult) => void;
  /** Failure callback */
  fail?: (result: any) => void;
  /** Completion callback */
  complete?: (result: any) => void;
}

interface UploadFileSuccessResult {
  /** Server response data */
  data: string;
  /** HTTP status code */
  statusCode: number;
}

interface UploadTask {
  /** Abort the upload */
  abort(): void;
  /** Listen for upload progress */
  onProgressUpdate(callback: (result: UploadProgressResult) => void): void;
  /** Remove progress listener */
  offProgressUpdate(callback?: (result: UploadProgressResult) => void): void;
  /** Listen for response headers */
  onHeadersReceived(callback: (result: HeadersReceivedResult) => void): void;
  /** Remove headers received listener */
  offHeadersReceived(callback?: (result: HeadersReceivedResult) => void): void;
}

interface UploadProgressResult {
  /** Upload progress percentage (0-100) */
  progress: number;
  /** Total bytes expected to send */
  totalBytesExpectedToSend: number;
  /** Bytes already sent */
  totalBytesSent: number;
}

Usage Examples:

import { uploadFile } from "@dcloudio/uni-h5";

// Upload with form data
const uploadTask = uploadFile({
  url: 'https://api.example.com/upload',
  filePath: '/tmp/image.jpg',
  name: 'file',
  formData: {
    'userId': '123',
    'category': 'profile'
  },
  header: {
    'Authorization': 'Bearer ' + token
  },
  success(result) {
    console.log('Upload successful:', result.data);
    const response = JSON.parse(result.data);
    console.log('File URL:', response.url);
  },
  fail(error) {
    console.error('Upload failed:', error);
  }
});

// Monitor upload progress
uploadTask.onProgressUpdate((result) => {
  console.log(`Upload progress: ${result.progress}%`);
  updateUploadProgress(result.progress);
});

WebSocket Connections

Establish and manage WebSocket connections for real-time communication.

/**
 * Connect to WebSocket server
 * @param options - WebSocket connection options
 * @returns SocketTask for managing the connection
 */
function connectSocket(options: ConnectSocketOptions): SocketTask;

/**
 * Listen for WebSocket connection open
 * @param callback - Open event handler
 */
function onSocketOpen(callback: (result: any) => void): void;

/**
 * Listen for WebSocket errors
 * @param callback - Error event handler
 */
function onSocketError(callback: (result: any) => void): void;

/**
 * Listen for WebSocket messages
 * @param callback - Message event handler
 */
function onSocketMessage(callback: (result: SocketMessageResult) => void): void;

/**
 * Listen for WebSocket connection close
 * @param callback - Close event handler
 */
function onSocketClose(callback: (result: SocketCloseResult) => void): void;

/**
 * Send WebSocket message
 * @param options - Message options
 */
function sendSocketMessage(options: SendSocketMessageOptions): void;

/**
 * Close WebSocket connection
 * @param options - Close options
 */
function closeSocket(options?: CloseSocketOptions): void;

interface ConnectSocketOptions {
  /** WebSocket server URL */
  url: string;
  /** Request headers */
  header?: Record<string, string>;
  /** Sub-protocols */
  protocols?: string[];
  /** TCP_NODELAY setting */
  tcpNoDelay?: boolean;
  /** PerMessage-Deflate extension */
  perMessageDeflate?: boolean;
  /** Request timeout in milliseconds */
  timeout?: number;
  /** Success callback */
  success?: (result: any) => void;
  /** Failure callback */
  fail?: (result: any) => void;
  /** Completion callback */
  complete?: (result: any) => void;
}

interface SocketTask {
  /** Send message through WebSocket */
  send(options: SendSocketMessageOptions): void;
  /** Close WebSocket connection */
  close(options?: CloseSocketOptions): void;
  /** Listen for connection open */
  onOpen(callback: (result: any) => void): void;
  /** Listen for connection close */
  onClose(callback: (result: SocketCloseResult) => void): void;
  /** Listen for errors */
  onError(callback: (result: any) => void): void;
  /** Listen for messages */
  onMessage(callback: (result: SocketMessageResult) => void): void;
}

interface SendSocketMessageOptions {
  /** Message data */
  data: string | ArrayBuffer;
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

interface SocketMessageResult {
  /** Received message data */
  data: string | ArrayBuffer;
}

interface SocketCloseResult {
  /** Close code */
  code: number;
  /** Close reason */
  reason: string;
  /** Whether connection was closed cleanly */
  wasClean: boolean;
}

interface CloseSocketOptions {
  /** Close code */
  code?: number;
  /** Close reason */
  reason?: string;
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

Usage Examples:

import { 
  connectSocket, 
  onSocketOpen, 
  onSocketMessage, 
  onSocketClose, 
  onSocketError,
  sendSocketMessage,
  closeSocket 
} from "@dcloudio/uni-h5";

// Connect to WebSocket
const socketTask = connectSocket({
  url: 'wss://api.example.com/websocket',
  header: {
    'Authorization': 'Bearer ' + token
  },
  success() {
    console.log('WebSocket connection initiated');
  }
});

// Listen for connection events
onSocketOpen(() => {
  console.log('WebSocket connected');
  // Send initial message
  sendSocketMessage({
    data: JSON.stringify({ type: 'hello', message: 'Connected' })
  });
});

onSocketMessage((result) => {
  try {
    const message = JSON.parse(result.data as string);
    console.log('Received message:', message);
    handleIncomingMessage(message);
  } catch (error) {
    console.error('Failed to parse message:', error);
  }
});

onSocketError((error) => {
  console.error('WebSocket error:', error);
  // Attempt to reconnect
  setTimeout(reconnectWebSocket, 5000);
});

onSocketClose((result) => {
  console.log('WebSocket closed:', result.code, result.reason);
  if (result.code !== 1000) { // Not normal closure
    // Attempt to reconnect
    setTimeout(reconnectWebSocket, 3000);
  }
});

// Send message
function sendMessage(type: string, data: any) {
  sendSocketMessage({
    data: JSON.stringify({ type, data }),
    success() {
      console.log('Message sent successfully');
    },
    fail(error) {
      console.error('Failed to send message:', error);
    }
  });
}

// Close connection
function disconnect() {
  closeSocket({
    code: 1000,
    reason: 'User disconnected'
  });
}

// Using SocketTask instance
const socket = connectSocket({
  url: 'wss://chat.example.com/room/123'
});

socket.onOpen(() => {
  console.log('Chat connected');
});

socket.onMessage((result) => {
  const message = JSON.parse(result.data as string);
  displayChatMessage(message);
});

socket.send({
  data: JSON.stringify({
    type: 'chat',
    message: 'Hello everyone!'
  })
});

Network Types

// Common network error types
interface NetworkError {
  errMsg: string;
  errno?: number;
}

// HTTP status code helpers
type HTTPStatusCode = 
  | 200 | 201 | 204 | 301 | 302 | 304 
  | 400 | 401 | 403 | 404 | 405 | 429 
  | 500 | 502 | 503 | 504;

// Content types
type ContentType = 
  | 'application/json'
  | 'application/x-www-form-urlencoded'
  | 'multipart/form-data'
  | 'text/plain'
  | 'text/html'
  | 'application/octet-stream';

// WebSocket ready states
enum WebSocketReadyState {
  CONNECTING = 0,
  OPEN = 1,
  CLOSING = 2,
  CLOSED = 3
}

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-h5

docs

components.md

context.md

device.md

framework.md

index.md

location.md

media.md

navigation.md

network.md

storage.md

ui-controls.md

tile.json