0Pricing
JavaScript Academy · レッスン

WebSocket 接続を開く

WebSocket サーバーに接続します。

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

WebSocketとは

WebSocketsは、1つのTCP接続を介してブラウザーとサーバーの間に永続的な全二重接続を提供します。HTTPのリクエストとレスポンスとは異なり、どちら側からでもいつでもメッセージを送信できるため、チャット、ライブフィード、ゲームに適しています。

wsとwssのスキーム

WebSocketのURLでは、ws://（平文）またはwss://（TLSで暗号化）を使います。本番環境では、httpsと同様に、常にwss://を優先してください。

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

接続を作成する

new WebSocket(url)でソケットを構築します。ハンドシェイクはすぐに開始されますが、接続が開くまでは使用できません。

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

onopenイベント

ハンドシェイクが完了すると、onopenが一度発生します。その後で初めて安全にデータを送信できます。

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

addEventListenerによる別の方法

on*プロパティの代わりにaddEventListenerを使って、複数のハンドラーを登録することもできます。

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

接続のreadyState

readyStateは接続のライフサイクルを示します。CONNECTING (0)、OPEN (1)、CLOSING (2)、CLOSED (3)があります。

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

サブプロトコル

2番目の引数でサブプロトコルをネゴシエートします。サーバーが1つを選択し、接続が開いた後にsocket.protocolで確認できます。

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

同一オリジンと混在コンテンツ

httpsで読み込まれたページからは、wss://接続しか開けません。ws://を開くと混在コンテンツとしてブロックされます。URLはそれに合わせて計画してください。

バイナリ型

binaryTypeを"blob"（デフォルト）または"arraybuffer"に設定して、バイナリフレームの受け取り方を指定します。

socket.binaryType = "arraybuffer";

最小限のクライアント

ここまでの内容をまとめて、接続を開き、状態を記録し、後片付けを行います。

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

接続タイムアウト

WebSocketには組み込みの接続タイムアウトがありません。onopenが制限時間内に発生しなかった場合にソケットを閉じるタイマーを使います。

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

クイックチェック

接続の基本を確認しましょう。

まとめ：接続を開く

ws/wssスキーム、new WebSocketによるソケットの作成、onopenの処理、readyStateの確認、サブプロトコルのネゴシエーション、接続タイムアウトの追加について学びました。次はメッセージの送受信です。

よくある質問

「WebSocket 接続を開く」レッスンは無料ですか？

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

「WebSocket 接続を開く」で何を学びますか？

WebSocket サーバーに接続します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

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

「WebSocket 接続を開く」レッスンにはどのくらい時間がかかりますか？

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

このJavaScript Academyレッスンでコードを書いて実行できますか？

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

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

  1. WebSocket 接続を開く
  2. メッセージを送受信する
  3. 接続のライフサイクルとエラー
  4. 再接続戦略
← JavaScript Academyに戻る