メッセージを送受信する
send と onmessage でデータをやり取りします。
「メッセージを送受信する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
テキストを送信する
接続が開いた後、socket.send(string)でテキストメッセージをサーバーに送信できます。
socket.onopen = () => {
socket.send("ping");
};onmessageで受信する
受信フレームごとにonmessageが発生します。データはevent.dataに格納されています。
socket.onmessage = (event) => {
console.log("Received:", event.data);
};JSONによるフレーミング
WebSocketが転送するのは生の文字列です。構造化データを送信するには、JSON.stringifyでシリアライズし、受信時に解析します。
socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
console.log(msg.type, msg.text);
};メッセージ種別の振り分け
よく使われるパターンは、typeフィールドを含め、その値に応じて処理を振り分ける方法です。
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
switch (msg.type) {
case "chat": showChat(msg); break;
case "presence": updatePresence(msg); break;
}
};バイナリデータを送信する
sendは、バイナリペイロード用にArrayBuffer、型付き配列、Blobも受け付けます。
const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);バイナリを受信する
binaryType = "arraybuffer"にすると、event.dataは型付き配列でラップできるArrayBufferになります。
socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
if (e.data instanceof ArrayBuffer) {
const view = new Uint8Array(e.data);
console.log(view.length);
}
};bufferedAmountによるバックプレッシャー
bufferedAmountは、キューに入り、まだ送信されていないバイト数を示します。ソケットへの過剰な送信によるメモリの際限ない増加を防ぐため、送信前に確認してください。
if (socket.bufferedAmount < 1_000_000) {
socket.send(payload);
}ハートビート
定期的にpingメッセージを送信すると、双方が接続の存続を確認でき、仲介者によってアイドル状態の接続が閉じられるのを防げます。
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: "ping" }));
}
}, 30000);WebSocket上のリクエストとレスポンス
送信メッセージにIDを付け、対応する返信が届いたときに保留中のPromiseを解決します。
const pending = new Map();
function request(payload) {
const id = crypto.randomUUID();
socket.send(JSON.stringify({ id, ...payload }));
return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};接続が開く前のキューイング
ソケットが開く前に送信する可能性がある場合は、メッセージをバッファーに保存し、onopenでまとめて送信します。
const queue = [];
function safeSend(data) {
if (socket.readyState === WebSocket.OPEN) socket.send(data);
else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };受信データを検証する
通信経路から届くデータを決して信用しないでください。JSON.parseをtry/catchで囲み、使用前にデータの形状を検証します。
socket.onmessage = (e) => {
let msg;
try { msg = JSON.parse(e.data); }
catch { return; }
if (typeof msg.type !== "string") return;
handle(msg);
};クイックチェック
メッセージングを確認しましょう。
まとめ：送受信
テキストとバイナリを送信し、onmessageを処理し、データをJSONとしてフレーミングし、種別で振り分け、bufferedAmountでバックプレッシャーを監視し、ハートビートを追加し、ソケットが開く前のメッセージをキューに入れました。次は接続のライフサイクルです。
よくある質問
「メッセージを送受信する」レッスンは無料ですか？
はい。「メッセージを送受信する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「メッセージを送受信する」で何を学びますか？
send と onmessage でデータをやり取りします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「メッセージを送受信する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- WebSocket 接続を開く
- メッセージを送受信する
- 接続のライフサイクルとエラー
- 再接続戦略