JavaScriptでリアルタイムWebアプリを構築！HTML5 WebSocket APIの完全ガイド
2024-06-22
HTML5 WebSocket API をサポートするブラウザ
WebSocket をサポートする主要なブラウザ
- Chrome: 4.0以降
- Edge: 12以降
- Firefox: 4以降
- Safari: 5.1以降
- Opera: 10.1以降
- Internet Explorer: 10以降
- Android: ブラウザバージョン 25以降
- BlackBerry Browser
WebSocket を使用するには
- ブラウザが WebSocket をサポートしていることを確認します。
WebSocketコンストラクタを使用して新しい WebSocket 接続を作成します。onopenイベントリスナーを使用して、接続が確立されたときに実行する関数を定義します。send()メソッドを使用して、サーバーにメッセージを送信します。close()メソッドを使用して、接続を閉じます。
WebSocket の利点
- 双方向通信: クライアントとサーバーが互いにメッセージを送受信できます。
- 低遅延: HTTP 要求/応答サイクルよりもはるかに低遅延で通信できます。
- 低オーバーヘッド: HTTP ヘッダーなどの余分なオーバーヘッドがありません。
- シンプル: 使用が簡単で、複雑な状態管理は必要ありません。
次の例は、WebSocket を使用してサーバーからメッセージを受信し、コンソールに表示する方法を示しています。
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('WebSocket connection opened');
};
ws.onmessage = function(event) {
console.log('Received message: ' + event.data);
};
ws.onclose = function() {
console.log('WebSocket connection closed');
};
ws.send('Hello from JavaScript!');
HTML5 WebSocket API のサンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebSocket チャット</title>
</head>
<body>
<h1>WebSocket チャット</h1>
<input type="text" id="message" placeholder="メッセージを入力">
<button onclick="sendMessage()">送信</button>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
console.log('WebSocket connection opened');
};
socket.onmessage = function(event) {
const message = JSON.parse(event.data);
const messageElement = document.createElement('li');
messageElement.textContent = message.user + ': ' + message.text;
messages.appendChild(messageElement);
};
socket.onclose = function() {
console.log('WebSocket connection closed');
};
function sendMessage() {
const message = document.getElementById('message').value;
const messageData = JSON.stringify({ user: 'あなた', text: message });
socket.send(messageData);
document.getElementById('message').value = '';
}
</script>
</body>
</html>
JavaScript
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
console.log('WebSocket connection opened');
};
socket.onmessage = function(event) {
const message = JSON.parse(event.data);
const messageElement = document.createElement('li');
messageElement.textContent = message.user + ': ' + message.text;
messages.appendChild(messageElement);
};
socket.onclose = function() {
console.log('WebSocket connection closed');
};
function sendMessage() {
const message = document.getElementById('message').value;
const messageData = JSON.stringify({ user: 'あなた', text: message });
socket.send(messageData);
document.getElementById('message').value = '';
}
サーバー
この例では、Node.js と Socket.IO を使用してサーバーを実装します。
const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', function(socket) {
socket.on('message', function(message) {
io.emit('message', message);
});
});
server.listen(3000, function() {
console.log('Server listening on port 3000');
});
このコードを実行するには、次の手順を実行します。
- Node.js をインストールします。
npm install express socket.ioコマンドを実行して、必要な依存関係をインストールします。- サーバーコード (上記) を
server.jsという名前のファイルに保存します。 node server.jsコマンドを実行してサーバーを起動します。- Webブラウザで
http://localhost:8080にアクセスします。
この例は、WebSocket を使用してチャットアプリケーションを作成する方法を示す基本的なものです。WebSocket を使用してより複雑なアプリケーションを作成することもできます。
サーバーサイドライブラリを使用する
WebSocket を使用してリアルタイム Web アプリケーションを構築するのを容易にするサーバーサイドライブラリが多数あります。これらのライブラリは、接続管理、メッセージング、認証などのタスクを処理するのに役立ちます。
フレームワークを使用する
WebSocket をサポートする Web フレームワークも多数あります。これらのフレームワークは、リアルタイム Web アプリケーションの開発を簡素化するために、ルーティング、テンプレート エンジニング、その他の機能を提供します。
WebRTC を使用する
WebRTC は、Web ブラウザ間でピアツーピアのリアルタイム通信を可能にする API です。WebSocket と同様に、WebRTC を使用してチャット、ゲーム、およびその他のリアルタイム Web アプリケーションを作成できます。
WebRTC の利点
- ピアツーピア通信: WebRTC を使用すると、サーバーを介さずにクライアント間で直接通信できます。
- 低遅延: WebRTC は、WebSocket よりも低遅延で通信できます。
- データ共有: WebRTC を使用すると、オーディオ、ビデオ、およびその他のデータを共有できます。
上記に示した方法は、HTML5 WebSocket API を使用してリアルタイム Web アプリケーションを作成するほんの一例です。WebSocket を使用して作成できるアプリケーションの種類は無限大です。
javascript web-applications html
