React Native

Send and Receive WebSocket Messages

See more WebSocket Examples

This example how to send and receive websocket messages.

A WebSocket message can be composed of one or more frames. The simple case is where a single frame is both the first and last frame in a message. This is the case where the 1st frame in the message has the "final frame" bit set.

This example demonstrates sending and receiving multi-frame messages.

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 { 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 demonstrates sending and receiving a multi-frame message.

  // The websocket message will be composed of three text lines, each frame will contain a single line.

  // Send the 1st frame in the message.
  let finalFrame = false;
  try {
    await ws.sendFrameAsync('This is the 1st frame\r\n', finalFrame);
  } catch {
    console.log(ws.lastErrorText);
    return;
  }

  // Send the 2nd frame in the message.
  try {
    await ws.sendFrameAsync('This is the 2nd frame\r\n', finalFrame);
  } catch {
    console.log(ws.lastErrorText);
    return;
  }

  // Send the 3rd and final frame in the message.
  finalFrame = true;
  try {
    await ws.sendFrameAsync('This is the 3rd frame\r\n', finalFrame);
  } catch {
    console.log(ws.lastErrorText);
    return;
  }

  // Read an incoming frames until we receive the final frame.
  // Note: It may be that the echo server (websockets.chilkat.io) responds with 
  // the full message in a single final frame.
  let receivedFinalFrame = false;
  while (!receivedFinalFrame) {

    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}`);
  }

  // Return the message accumulated in the above calls to ReadFrame.
  const receivedMsg = ws.getFrameData();
  console.log(`Received: ${receivedMsg}`);

  // 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.');
}