WebSockets & Realtime Systems Programming · レッスン

ブラウザーWebSocket APIの基礎

JavaScriptのネイティブ`WebSocket`オブジェクトを使って、クライアント側の接続を確立・管理します。

「ブラウザーWebSocket APIの基礎」はCoddyKit上の無料WebSockets & Realtime Systems Programmingレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWebSockets & Realtime Systems Programming学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebSockets & Realtime Systems Programmingコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Browser WebSocket Power

Welcome to the world of real-time web! The browser's native WebSocket API is your direct link to instant data exchange.

It lets web pages talk to servers constantly, without needing to refresh. Imagine live chats, multiplayer game updates, or real-time stock tickers – all powered by WebSockets!

Initiating a WebSocket

To start, you create a new WebSocket object in JavaScript. You need the server's URL, which begins with ws:// for unsecure connections or wss:// for secure, encrypted ones (like https://).

const socket = new WebSocket("wss://echo.websocket.events");
console.log("WebSocket object created. Attempting connection...");

Understanding `readyState`

A WebSocket connection goes through different states, which you can check using the readyState property. This tells you the current status:

0 (CONNECTING): The connection is not yet open.
1 (OPEN): The connection is established and ready for communication.
2 (CLOSING): The connection is in the process of closing.
3 (CLOSED): The connection has been closed or could not be opened.

When Connection Opens

The onopen event fires when your WebSocket connection has successfully established. This is the perfect moment to confirm the connection and perhaps send your first message to the server!

const socket = new WebSocket("wss://echo.websocket.events");

socket.onopen = (event) => {
  console.log("Connection opened successfully!");
  // Now you can safely send data.
};

console.log("Waiting for WebSocket connection to open...");

Sending Data with `send()`

Once the connection is OPEN (i.e., after onopen fires), you can use the send() method to transmit data to the server. You can send strings, Blobs, or ArrayBuffers.

const socket = new WebSocket("wss://echo.websocket.events");

socket.onopen = () => {
  socket.send("Hello from CoddyKit!");
  console.log("Sent 'Hello from CoddyKit!' to server.");
};

socket.onerror = (error) => {
  console.error("Connection error before sending.");
};

console.log("WebSocket client ready to send a message...");

Handling Incoming Data

The onmessage event is triggered whenever the client receives data from the server. The actual data payload is available in event.data.

const socket = new WebSocket("wss://echo.websocket.events");

socket.onopen = () => {
  socket.send("Requesting echo...");
};

socket.onmessage = (event) => {
  console.log("Received data:", event.data);
  // A real echo server would send "Requesting echo..." back.
};

socket.onerror = (error) => {
  console.error("Connection error during message receipt.");
};

console.log("Listening for messages from the server...");

Graceful Disconnect: `close()`

To close a WebSocket connection gracefully, use the close() method. You can optionally provide a numeric code and a human-readable reason for the closure.

const socket = new WebSocket("wss://echo.websocket.events");

socket.onopen = () => {
  console.log("Connection open. Closing in 1 second...");
  setTimeout(() => {
    socket.close(1000, "Demo complete");
  }, 1000);
};

socket.onclose = (event) => {
  console.log(`Connection closed: Code ${event.code} - ${event.reason}`);
};

console.log("Attempting to open then close connection...");

Understanding `onclose` Details

The onclose event provides useful details about why the connection closed. The event object includes:

event.wasClean: A boolean indicating if the connection closed cleanly.
event.code: A numeric status code (e.g., 1000 for Normal Closure).
event.reason: A human-readable string explaining the closure.

These details help you debug and manage your connection's lifecycle.

Catching Connection Errors

Network issues, invalid server URLs, or server-side problems can cause a WebSocket connection to fail. The onerror event is crucial for catching these issues and reacting appropriately.

Note: The error object itself often provides limited details for security reasons, but its occurrence signals a problem.

const socket = new WebSocket("ws://nonexistent.server"); // Intentionally bad URL

socket.onerror = (error) => {
  console.error("WebSocket Error occurred!");
  // This typically fires before onclose for connection failures.
};

socket.onclose = (event) => {
  if (!event.wasClean) {
    console.log("Connection closed due to error or unclean shutdown.");
  }
};

console.log("Attempting connection to a non-existent server to trigger an error...");

Putting it All Together

Here's a conceptual look at how you might combine all these event handlers for a basic client flow:

const ws = new WebSocket("wss://echo.websocket.events");

ws.onopen = () => {
  console.log("Connected to server!");
  ws.send("Hello from client!");
};

ws.onmessage = (event) => {
  console.log("Server says:", event.data);
  ws.close(); // Close after receiving the first message
};

ws.onclose = (event) => {
  console.log(`Disconnected: ${event.code} - ${event.reason}`);
};

ws.onerror = (err) => {
  console.error("WebSocket Error:", err);
};

This structure ensures you react to all key stages of the connection.

WebSocket Quiz

Which of the following WebSocket API methods or properties is primarily used to send data from the client to the server?

Recap: WebSocket Fundamentals

Great job! You've successfully explored the essentials of the browser's native WebSocket API:

How to create a new WebSocket instance with new WebSocket().
Understanding connection states using the readyState property.
Handling crucial connection events: onopen, onmessage, onclose, and onerror.
Sending data to the server using the send() method.
Gracefully closing connections with close().

Next, we'll dive deeper into handling different types of data and managing client-side events more robustly to build truly interactive applications!

よくある質問

「ブラウザーWebSocket APIの基礎」レッスンは無料ですか？

はい。「ブラウザーWebSocket APIの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、WebSockets & Realtime Systems Programmingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebSockets & Realtime Systems Programmingコースには全4レッスンが含まれています。

「ブラウザーWebSocket APIの基礎」で何を学びますか？

JavaScriptのネイティブ`WebSocket`オブジェクトを使って、クライアント側の接続を確立・管理します。ブラウザで直接実行するハンズオンコードでWebSockets & Realtime Systems Programmingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

WebSockets & Realtime Systems Programmingを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWebSockets & Realtime Systems Programmingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「ブラウザーWebSocket APIの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWebSockets & Realtime Systems Programmingレッスンでコードを書いて実行できますか？

はい。すべてのWebSockets & Realtime Systems Programmingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← WebSockets & Realtime Systems Programmingに戻る