JavaScript Academy · Lesson

Opening a WebSocket Connection

Connect to a WebSocket server.

Lesson 1 of 413 steps

Opening a WebSocket Connection is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

What Are WebSockets?

WebSockets provide a persistent, full-duplex connection between browser and server over a single TCP connection. Unlike HTTP request/response, either side can send messages at any time — ideal for chat, live feeds, and games.

The ws and wss Schemes

WebSocket URLs use ws:// (plain) or wss:// (TLS-encrypted). Always prefer wss:// in production, just like https.

const url = "wss://example.com/socket";

Creating a Connection

Construct a socket with new WebSocket(url). The handshake starts immediately; the connection is not ready until it opens.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

The onopen Event

onopen fires once the handshake completes. Only then is it safe to send data.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

addEventListener Alternative

You can use addEventListener instead of the on* properties to attach multiple handlers.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

Connection readyState

readyState reports the lifecycle: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

Subprotocols

A second argument negotiates a subprotocol. The server picks one and you can read socket.protocol after opening.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

Same-Origin and Mixed Content

A page loaded over https may only open wss:// connections — opening ws:// is blocked as mixed content. Plan your URLs accordingly.

Binary Type

Set binaryType to "blob" (default) or "arraybuffer" to control how binary frames arrive.

socket.binaryType = "arraybuffer";

A Minimal Client

Putting it together: open, log status, and clean up.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

Connection Timeouts

WebSockets have no built-in connect timeout. Use a timer that closes the socket if onopen has not fired in time.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

Quick Check

Test connection basics.

Answer it in the interactive lesson

Recap: Opening a Connection

You learned the ws/wss schemes, created a socket with new WebSocket, handled onopen, checked readyState, negotiated subprotocols, and added a connect timeout. Next: sending and receiving messages.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Opening a WebSocket Connection” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Opening a WebSocket Connection”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

What will I learn in “Opening a WebSocket Connection”?

Connect to a WebSocket server. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Opening a WebSocket Connection” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy