Writing WebSocket client applications

WebSocket(), send(), onmessage(), close()

2025-06-09

Written by: tdtc

Req ：

Android Browser: v4.4+
Safari supported: v5/6+

• WebSocket()
• send()
• onmessage()
• close()

Creating a WebSocket object

webSocket = new WebSocket(url, protocols);

• protocols

Optional

URI Schemes

• wss

Equivalent to HTTPs.

Connection confidentiality and integrity is provided by running the WebSocket Protocol over TLS (wss URIs).

Connection errors

• Status Codes

1000 ~ 1011,  1015

Examples

const exampleSocket = new WebSocket(
  "wss://www.example.com/socketserver"
);

Sending data to the server

exampleSocket.send("Here's some text that the server is urgently awaiting!");

You can send data as a string, Blob, or ArrayBuffer.

Using JSON to transmit objects

// Send text to all users through the server
function sendText() {
  // Construct a msg object containing the data the server needs to process the message from the chat client.
  const msg = {
    type: "message",
    text: document.getElementById("text").value,
    id: clientID,
    date: Date.now(),
  }

  // Send the msg object as a JSON-formatted string.
  exampleSocket.send(JSON.stringify(msg));

  // Blank the text input element, ready to receive the next line of text from the user.
  document.getElementById("text").value = "";
}

Receiving messages from the server

exampleSocket.onmessage = (event) => {
  console.log(event.data);
};

Receiving and interpreting JSON objects

exampleSocket.onmessage = (event) => {
  const f = document.getElementById("chat-box").contentDocument;
  let text = "";
  const msg = JSON.parse(event.data);
  const time = new Date(msg.date);
  const timeStr = time.toLocaleTimeString();

  switch (msg.type) {
    case "id":
      clientID = msg.id;
      setUsername();
      break;
    case "username":
      text = `User <em>${msg.name}</em> signed in at ${timeStr}<br>`;
      break;
    case "message":
      text = `(${timeStr}) ${msg.name} : ${msg.text} <br>`;
      break;
    case "reject-username":
      text = `Your username has been set to <em>${msg.name}</em> because the name you chose is in use.<br>`;
      break;
    case "user-list":
      document.getElementById("user-list-box").innerText = msg.users.join("\n");
      break;
  }

  if (text.length) {
    f.write(text);
    document.getElementById("chat-box").contentWindow.scrollByPages(1);
  }
};

Closing the connection

exampleSocket.close();

Ref

• Writing WebSocket client applications