or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

components.md context.md device.md framework.md index.md location.md media.md network.md storage.md ui-controls.md

tile.json

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
}

Version

Tile

Files

network.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Network Requests

Capabilities

HTTP Requests

File Downloads

File Uploads

WebSocket Connections

Network Types

network.mddocs/