Photo by
norinity1103
今さら聞けないWebSocketの使い方
WebSocketは、リアルタイム通信を実現するための技術で、特にチャットアプリや通知機能に欠かせない技術です。しかし、「どうやって使えばいいのか？」と聞きにくい方も多いはず。この記事では、WebSocketの基本的な使い方から、コピペで使える実例までを丁寧に解説します。
1. WebSocketの基本的な仕組み
WebSocketは、通常のHTTP通信とは異なり、以下の特徴を持っています：
一度接続を確立すると、サーバーとクライアントの間で双方向通信が可能。
常に接続を維持するため、リアルタイム性が高い。
サーバーからクライアントへの「プッシュ通知」が簡単に実現できる。
具体例：HTTPとWebSocketの違い
通信方法特徴HTTPクライアントがリクエストを送るたびに応答する（片方向通信）。WebSocket接続後、クライアントとサーバーが自由にデータを送受信できる（双方向通信）。
2. WebSocketサーバーのセットアップ
まずは、Node.jsを使ったシンプルなWebSocketサーバーを作成します。
コード例（Node.js）
以下のコードをserver.jsとして保存してください：
const WebSocket = require('ws');
// WebSocketサーバーをポート8080で起動
const wss = new WebSocket.Server({ port: 8080 });
console.log("WebSocketサーバーが起動しました (ws://localhost:8080)");
// クライアントが接続してきた時の処理
wss.on('connection', (ws) => {
console.log("新しいクライアントが接続しました");
// クライアントからのメッセージを受信
ws.on('message', (message) => {
console.log(`受信メッセージ: ${message}`);
// メッセージを送り返す
ws.send(`サーバーからの返信: ${message}`);
});
// 接続時に初回メッセージを送信
ws.send("接続成功！サーバーにようこそ！");
});
コードの解説
WebSocketサーバーの作成
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });クライアントの接続処理
wss.on('connection', (ws) => {
console.log("新しいクライアントが接続しました");
});メッセージの受信と送信
ws.on('message', (message) => {
console.log(`受信メッセージ: ${message}`);
ws.send(`サーバーからの返信: ${message}`);
});初回メッセージの送信
ws.send("接続成功！サーバーにようこそ！");3. クライアントのセットアップ
次に、ブラウザ側で動作するクライアントを作成します。
コード例（HTML＋JavaScript）
以下をindex.htmlとして保存してください：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocketテスト</title>
</head>
<body>
<h1>WebSocketのテストページ</h1>
<button id="send">メッセージを送信</button>
<p id="output"></p>
<script>
// WebSocketサーバーに接続
const socket = new WebSocket('ws://localhost:8080');
// 接続が開いたときの処理
socket.onopen = () => {
console.log('サーバーに接続しました');
document.getElementById('output').innerText = "接続成功！";
};
// サーバーからのメッセージを受信
socket.onmessage = (event) => {
console.log(`サーバーからのメッセージ: ${event.data}`);
document.getElementById('output').innerText = `サーバーから: ${event.data}`;
};
// メッセージを送信
document.getElementById('send').addEventListener('click', () => {
socket.send('クライアントからのメッセージです！');
});
</script>
</body>
</html>コードの解説
WebSocket接続
const socket = new WebSocket('ws://localhost:8080');接続が開いたときの処理
socket.onopen = () => {
console.log('サーバーに接続しました');
};メッセージの受信
socket.onmessage = (event) => {
console.log(`サーバーからのメッセージ: ${event.data}`);
};メッセージの送信
document.getElementById('send').addEventListener('click', () => {
socket.send('クライアントからのメッセージです！');
});4. 実行方法
サーバーを起動：
node server.jsブラウザでindex.htmlを開く。
接続が成功したら、ボタンをクリックしてメッセージを送信してみましょう！
5. 応用：Expressと組み合わせた例
WebSocketは単独でも使えますが、Expressなどのフレームワークと組み合わせると便利です。
サーバーコード
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
app.use(express.static('public'));
wss.on('connection', (ws) => {
ws.on('message', (message) => ws.send(`サーバーから: ${message}`));
ws.send('接続成功！');
});
server.listen(3000, () => {
console.log('サーバーが起動しました: http://localhost:3000');
});これで、「WebSocketの仕組み」と「使い方」がしっかり理解できたはずです。次は、実際のプロジェクトで活用してみてください！