JavaScript

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.

JavaScript

var success = false;

// This example requires the Chilkat API to have been previously unlocked.
// See Global Unlock Sample for sample code.

var ws = new CkWebSocket();

// 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.

var rest = new CkRest();
// 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.
success = rest.Connect("websockets.chilkat.io",80,false,false);
ws.UseConnection(rest);
ws.AddClientHeaders();
var responseBodyIgnored = rest.FullRequestNoBody("GET","/wsChilkatEcho.ashx");
success = ws.ValidateServerHandshake();
if (success !== true) {
    console.log(ws.LastErrorText);
    return;
}

// This example sends a small JPG file (about 7KB) in a websocket frame.
var jpgData = new CkBinData();
success = 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.
var finalFrame = true;
success = ws.SendFrameBd(jpgData,finalFrame);
if (success !== true) {
    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.
var receivedFinalFrame = false;
while (receivedFinalFrame == false) {

    // 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.
    success = ws.ReadFrame();
    if (success !== true) {
        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.
var jpgReceivedData = new CkBinData();
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.
success = ws.SendClose(true,1000,"Closing this websocket.");
if (success !== true) {
    console.log(ws.LastErrorText);
    return;
}

// Read the Close response.
success = ws.ReadFrame();
if (success !== true) {
    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.");