React Native

WebSocket Send/Receive Binary Data

See more WebSocket Examples

Demonstrates how to send and receive binary data on a websocket. This example uses Chilkat's websocket test echo server at ws://websockets.chilkat.io/wsChilkatEcho.ashx

Note: The websockets.chilkat.io server imposes the following limitations:
Messages must be 16K or less, and each connection is limited to a max of 16 echoed messages.

React Native

import { BinData, Rest, WebSocket } from '@chilkat/react-native'

async function chilkatExample() {
  // This example requires the Chilkat API to have been previously unlocked.
  // See Global Unlock Sample for sample code.

  const ws = new WebSocket();

  // For brevity, this example does not check for errors when etablishing the WebSocket connection.
  // See Establish WebSocket Connection for more complete sample code for making the connection.

  const rest = new Rest();
  // Connect to websockets.chilkat.io
  // IMPORTANT: websockets.chilkat.io accepts frames of up to 16K in size and echoes them back.
  // IMPORTANT: The websockets.chilkat.io server imposes the following limitations: 
  // ---------- Messages must be 16K or less, and each connection is limited to a max of 16 echoed messages.
  await rest.connectAsync('websockets.chilkat.io', 80, false, false);
  ws.useConnection(rest);
  ws.addClientHeaders();
  const responseBodyIgnored = await rest.fullRequestNoBodyAsync('GET', '/wsChilkatEcho.ashx');
  try {
    ws.validateServerHandshake();
  } catch {
    console.log(ws.lastErrorText);
    return;
  }

  // This example sends a small JPG file (about 7KB) in a websocket frame.
  const jpgData = new BinData();
  jpgData.loadFile('qa_data/jpg/starfish.jpg');

  console.log(`Number of bytes to send = ${jpgData.numBytes}`);

  // Send a frame containing the JPG image data.
  // This will be the first and final frame, and therefore this constitutes the entire message.
  const finalFrame = true;
  try {
    await ws.sendFrameBdAsync(jpgData, finalFrame);
  } catch {
    console.log(ws.lastErrorText);
    return;
  }

  // Read the echoed binary frame(s).
  // (We sent the JPG file in a single frame, but we may receive the echo in multiple frames, but it will be one message.)
  // Read an incoming frames until we receive the final frame.
  let receivedFinalFrame = false;
  while (!receivedFinalFrame) {

    // The ws object is accumulating the received data internally.  Once we get the final frame, we'll get the 
    // accumulated data which should constitute the entire JPG.
    try {
      await ws.readFrameAsync();
    } catch {
      console.log('Failed to receive a frame');
      console.log(`ReadFrame fail reason = ${ws.readFrameFailReason}`);
      console.log(ws.lastErrorText);
      return;
    }

    receivedFinalFrame = ws.finalFrame;

    // Show the opcode and final frame bit for the frame just received:
    console.log(`Frame opcode: ${ws.frameOpcode}`);
    console.log(`Final frame: ${receivedFinalFrame}`);
  }

  // Get the accumulated received data.
  const jpgReceivedData = new BinData();
  ws.getFrameDataBd(jpgReceivedData);
  console.log(`Received ${jpgReceivedData.numBytes} bytes`);

  // Save the received JPG to a file so we can check it..
  jpgReceivedData.writeFile('qa_output/starfish_ws.jpg');

  // Close the websocket connection.
  try {
    await ws.sendCloseAsync(true, 1000, 'Closing this websocket.');
  } catch {
    console.log(ws.lastErrorText);
    return;
  }

  // Read the Close response.
  try {
    await ws.readFrameAsync();
  } catch {
    console.log(`ReadFrame fail reason = ${ws.readFrameFailReason}`);
    console.log(ws.lastErrorText);
    return;
  }

  // Should receive the "Close" opcode.
  console.log(`Received opcode: ${ws.frameOpcode}`);
  // Should be the same status code we sent (1000)
  console.log(`Received close status code: ${ws.closeStatusCode}`);
  // The server may echo the close reason.  If not, this will be empty.
  console.log(`Echoed close reason: ${ws.closeReason}`);

  console.log('Success.');
}