Vue Academy · レッスン

ブラウザでのWebSocket入門

new WebSocket(url)、onopen/onmessage/onerror/onclose、send()、readyState

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

ブラウザーでのリアルタイム通信

HTTP はリクエストとレスポンスの仕組みです。クライアントが要求し、サーバーが応答すると、接続は閉じられます。チャット、ライブダッシュボード、マルチプレイヤーゲームでは、要求されなくてもサーバーからデータをプッシュする必要があります。

WebSocketプロトコルを使うと、ブラウザーとサーバーの間に、長時間維持される単一の双方向接続を確立できます。

接続を開く

ブラウザーにはグローバルなWebSocketコンストラクターが組み込まれています。ws://（平文）またはwss://（TLS）スキームの URL を渡します。

オブジェクトを作成すると、接続のハンドシェイクがすぐに開始されます。

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

onopen ハンドラー

コンストラクターを呼び出した瞬間に接続が準備できるわけではありません。ハンドシェイクが完了し、ソケットがデータを送信できる状態になると、onopenイベントが 1 回発生します。

最初のメッセージは必ずonopenの中から送信し、それより前には送信しないでください。

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

メッセージを受信する

受信データはonmessageを通じて届きます。ペイロードはevent.dataに入り、デフォルトでは文字列です。

ほとんどのアプリは JSON を送信するため、解析してオブジェクトに戻します。

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

メッセージを送信する

ws.send()を使って送信します。WebSocket が扱えるのは生の文字列またはバイナリなので、まずJSON.stringifyでオブジェクトをエンコードします。

双方でデータの形式を取り決めます。ここではtypeとpayloadを使います。

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

一連の送受信

open、send、receive を組み合わせると、完全なエコークライアントになります。ソケットを開き、open 時に送信し、返ってきた内容をすべてログに記録します。

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

接続を閉じる

接続が終了すると、ws.close()を呼び出した場合でもネットワークが切断された場合でも、oncloseイベントが発生します。このイベントには数値のcodeと、文字列のreasonが含まれます。

コード1000は正常な切断を示します。

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

エラーを処理する

トランスポートで障害が発生すると、onerrorイベントが発生します。セキュリティ上の理由から、エラーイベント自体の詳細情報は意図的に少なくなっています。何か問題が発生し、まもなく接続が閉じられる可能性があることを示すシグナルとして扱ってください。

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

readyState プロパティ

ws.readyStateは、ソケットのライフサイクル上の状態を示す数値です。まだ開いていないソケットに対して送信して例外を発生させないよう、送信前には必ず確認してください。

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

名前付き readyState 定数

マジックナンバーの代わりに、WebSocketクラスの定数を使用します。0、1、3と書くよりも、はるかに意味が明確になります。

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Vue で組み合わせる

Vue コンポーネントでは、通常onMountedでソケットを作成し、onUnmountedで破棄します。ハンドラーは、テンプレートが表示するリアクティブな ref を更新します。

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

理解度チェック

WebSocket の readyState 値について理解できているか確認しましょう。

まとめ

このレッスンでは、次のことを学びました。

new WebSocket(url)は、ws://またはwss://を使った双方向接続を開始します。
onopenはソケットの準備が完了すると発生します。送信はその後に限って行います。
onmessageはevent.dataにデータを渡します。JSON を解析するとオブジェクトを取得できます。
ws.send(JSON.stringify(msg))でデータを送信します。
oncloseとonerrorで接続の終了と障害を処理します。
readyStateは、0 が CONNECTING、1 が OPEN、2 が CLOSING、3 が CLOSED です。

よくある質問

「ブラウザでのWebSocket入門」レッスンは無料ですか？

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

「ブラウザでのWebSocket入門」で何を学びますか？

new WebSocket(url)、onopen/onmessage/onerror/onclose、send()、readyState ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ブラウザでのWebSocket入門」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る