Opening a WebSocket Connection
Connect to a WebSocket server.
Opening a WebSocket Connection is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
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.
Frequently asked questions
Is the “Opening a WebSocket Connection” lesson free?
Yes — the full text of “Opening a WebSocket Connection” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
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
- Opening a WebSocket Connection
- Sending and Receiving Messages
- Connection Lifecycle and Errors
- Reconnection Strategies