Vue Academy · レッスン

VueでのSocket.ioクライアント

socket.io-client、io(url)、socket.on/emit、socketイベントからのリアクティブなVue状態

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

Socket.IO を使う理由

生の WebSocket は低レベルです。Socket.IOは、基盤の上に自動再接続、フォールバックトランスポート、ルーム、使いやすいイベントベース API を追加する人気のライブラリです。

サーバー用とクライアント用に対応するパッケージが用意されています。ここでは Vue 内で使用するブラウザークライアントに焦点を当てます。

クライアントをインストールする

クライアントパッケージを Vue プロジェクトに追加します。サーバーパッケージとは別のパッケージです。

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

io() で接続する

io(url)を呼び出してソケットを作成し、接続します。生の WebSocket とは異なり、http(s):// URL を渡します。Socket.IO がトランスポートを自動的にネゴシエーションします。

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

socket.on でリッスンする

Socket.IO は名前付きイベントを中心に構成されています。socket.on(name, handler)を使って、サーバーイベントに反応します。ハンドラーには、サーバーが発行したペイロードが渡されます。

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

組み込みのライフサイクルイベント

Socket.IO は独自のライフサイクルイベントを発行します。connect、disconnect、connect_errorをリッスンできます。

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

socket.emit で送信する

送信するには、socket.emit(name, payload)を呼び出します。イベント名は自由に決められますが、サーバーは同じ名前をリッスンします。手動で JSON をエンコードする必要はありません。Socket.IO が自動的にシリアライズします。

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

リアクティブなメッセージ配列

Vue では、受信したメッセージをリアクティブなref配列に保持します。socket.onのハンドラーが配列に追加すると、テンプレートが自動的に再レンダリングされます。

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

script setup で組み込む

一般的なコンポーネントでは、onMountedで接続し、リスナーを登録して、テンプレートから呼び出せる送信関数を公開します。

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

リスナーをクリーンアップする

socket.onで登録したリスナーは、そのままアタッチされ続けます。コンポーネントが再マウントされると、ハンドラーが重複して登録される可能性があります。破棄するときにsocket.offで削除してください。

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

onUnmounted で切断する

コンポーネントが破棄されるときは、socket.disconnect()で接続を閉じてください。そうしないと、ページ遷移後も開いたソケットが残り、リソースがリークする可能性があります。

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

確認応答

Socket.IO の便利な機能の 1 つに確認応答があります。emitの最後の引数としてコールバックを渡すと、サーバーから受信確認のためにそのコールバックを呼び出せます。「メッセージが配信されました」という UX に最適です。

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

理解度チェック

Socket.IO クライアント API について理解できているか確認しましょう。

まとめ

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

socket.io-clientのio(url)は、http(s) URL を使って接続します。
socket.on(name, handler)で、名前付きサーバーイベントに反応します。
socket.emit(name, payload)でイベントを送信します。ペイロードは自動的にシリアライズされます。
受信データをリアクティブなref配列に追加して、テンプレートに表示します。
onUnmountedでsocket.offとsocket.disconnect()を使ってクリーンアップします。

よくある質問

「VueでのSocket.ioクライアント」レッスンは無料ですか？

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

「VueでのSocket.ioクライアント」で何を学びますか？

socket.io-client、io(url)、socket.on/emit、socketイベントからのリアクティブなVue状態ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「VueでのSocket.ioクライアント」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る