6.1 WebSocketの基本コンセプト
WebSocketは、1つのTCP接続で完全な双方向通信を提供するプロトコルなんだ。 クライアントとサーバーの間で双方向のデータ転送ができるから、 チャット、オンラインゲーム、通知システムみたいなリアルタイムでデータ交換が必要なアプリにぴったり。
WebSocketの利点
- 双方向通信: WebSocketは双方向のデータ転送を提供して、サーバーとクライアントがいつでもメッセージを送り合えるよ。
- 遅延が少ない: 従来のHTTPリクエストと比べて、WebSocketは持続的な接続で遅延を減らすんだ。
- サーバーの負荷が減る: WebSocketはHTTPリクエストの数を減らして、サーバーの負荷を軽減するよ。
WebSocketの主要コンポーネント
- WebSocketサーバー: WebSocket接続を受け付けて処理するサーバー側の部分。
- WebSocketクライアント: サーバーと接続してデータを交換するクライアント側の部分。
6.2 JavaScriptでのWebSocketの扱い
JavaScriptでのWebSocketの扱いは、接続設定、メッセージ送受信、イベント処理のためのメソッドが揃ったWebSocketオブジェクトを使って行われるよ。
WebSocket接続の作成:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
WebSocketのイベント:
open: 接続が確立された時に発生する。message: サーバーからメッセージを受け取った時に発生する。error: エラーが発生した時に発生する。close: 接続が閉じられた時に発生する。
WebSocketの使用例:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
6.3 Node.jsでのWebSocketサーバーの例
Node.jsではwsライブラリを使ってWebSocketサーバーを作成できるよ。
ライブラリのインストール:
Terminal
npm install ws
WebSocketサーバーの例:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
6.4 WebSocketの主要なイベントとメソッド
クライアントのイベント:
onopen: WebSocket接続が確立された時に発生するonmessage: サーバーからメッセージを受け取った時に発生するonclose: WebSocket接続が閉じられた時に発生するonerror: WebSocketのエラーが発生した時に発生する
クライアントのメソッド
send(data): サーバーにデータを送信するclose(code, reason): 指定されたコードと理由でWebSocket接続を閉じる
サーバーのイベント
connection: クライアントがサーバーに接続した時に発生するmessage: クライアントからメッセージを受け取った時に発生するclose: WebSocket接続が閉じられた時に発生するerror: WebSocketのエラーが発生した時に発生する
サーバーのメソッド
send(data): クライアントにデータを送信するclose(code, reason): 指定されたコードと理由でWebSocket接続を閉じる
6.5 WebSocketの使用例
例: リアルタイムチャット
クライアントサイド:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Enter your message" />
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
サーバーサイド:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// すべての接続されたクライアントにメッセージをブロードキャストする
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
GO TO FULL VERSION