チャット アプリ、オンライン ゲーム、ライブ コラボレーション ツールなどの最新のアプリケーションでは、リアルタイム コミュニケーションが不可欠です。 WebSocket は、単一の TCP 接続上で全二重通信チャネルを提供し、クライアントとサーバーの間でリアルタイムでデータを交換できるようにします。この記事では、WebSocket とその使用例、および WebSocket を Node.js に実装する方法について説明します。さらに、WebSocket 通信を簡素化する人気のあるライブラリである Socket.IO について、実際の例とともに詳しく説明します。
この記事では以下について説明します:
WebSocket は、サーバーとクライアントがいつでもデータを送信できるようにする双方向通信プロトコルを提供します。クライアントがすべての通信を開始し、サーバーにデータを要求する HTTP とは異なり、WebSocket では永続的な接続が可能になり、接続を再確立することなく双方が継続的にデータを交換できます。
どちらのプロトコルも TCP 上で実行されますが、次のような大きな違いがあります。
| Feature | WebSockets | HTTP |
|---|---|---|
| Connection | Persistent, full-duplex | Stateless, new connection for each request |
| Directionality | Bi-directional (server and client communicate) | Client to server only (server responds) |
| Overhead | Low after connection establishment | Higher due to headers with every request |
| Use Case | Real-time applications (chats, games) | Traditional websites, API requests |
WebSocket サーバーを作成するために、Node.js は WebSocket サーバーを作成してクライアントとの通信を確立できる組み込みの ws ライブラリを提供します。
npm install ws
const WebSocket = require('ws');
// Create a WebSocket server on port 8080
const wss = new WebSocket.Server({ port: 8080 });
// Listen for incoming connections
wss.on('connection', (ws) => {
console.log('Client connected');
// Send a message to the client
ws.send('Welcome to the WebSocket server!');
// Listen for messages from the client
ws.on('message', (message) => {
console.log(`Received: ${message}`);
ws.send(`Echo: ${message}`);
});
// Handle connection closure
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server running on ws://localhost:8080');
この例では:
クライアント側では、JavaScript を使用して WebSocket サーバーに接続できます。
const socket = new WebSocket('ws://localhost:8080');
// Event listener for when the connection is established
socket.addEventListener('open', (event) => {
socket.send('Hello Server!');
});
// Listen for messages from the server
socket.addEventListener('message', (event) => {
console.log(`Message from server: ${event.data}`);
});
Socket.IO は、以下を提供することで WebSocket 通信を容易にするライブラリです。
npm install socket.io
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
// Listen for incoming connections
io.on('connection', (socket) => {
console.log('New client connected');
// Listen for messages from the client
socket.on('message', (msg) => {
console.log(`Message from client: ${msg}`);
socket.emit('response', `Server received: ${msg}`);
});
// Handle disconnection
socket.on('disconnect', () => {
console.log('Client disconnected');
});
});
// Start the server
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
このコード内:
Socket.IO を使用してシンプルなリアルタイム チャット アプリケーションを構築して、その能力を実証してみましょう。
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
// Broadcast when a user sends a message
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Listening on *:3000');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO Chat</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1>Real-time Chat</h1>
<ul id="messages"></ul>
<form id="chatForm">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
<script>
const socket = io();
// Listen for incoming chat messages
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
// Send chat message
const form = document.getElementById('chatForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const message = document.getElementById('message').value;
socket.emit('chat message', message);
document.getElementById('message').value = '';
});
</script>
</body>
</html>
このシンプルなチャット アプリケーションでは、複数のユーザーが接続してリアルタイムでメッセージを交換できます。 1 人のユーザーが送信したメッセージは、サーバーに接続している他のすべてのユーザーにブロードキャストされます。
WebSocket と Socket.IO は、次のようなリアルタイム通信を必要とするシナリオに最適です。
HTTP と同様に、WebSocket 接続も機密データを保護するためにセキュリティで保護される必要があります。これは、wss:// (WebSocket Secure) を使用して実行できます。これは、基本的に TLS (Transport Layer Security) 上の WebSocket です。
NGINX 構成の例:
server {
listen 443 ssl;
server_name yourdomain.com;
ssl_certificate /etc/ssl/certs/yourdomain.crt;
ssl_certificate_key /etc/ssl/private/yourdomain.key;
location / {
proxy_pass http://localhost:8080;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
これにより、すべての WebSocket トラフィックが確実に暗号化され、盗聴や改ざんから保護されます。
WebSocket と Socket.IO により、クライアントとサーバー間のリアルタイム通信が可能になります。これは、即時更新を必要とする最新のアプリケーションにとって不可欠です。 WebSocket または Socket.IO ベースのソリューションを実装すると、チャット システム、共同作業ツール、ライブ ダッシュボードなど、応答性が高く効率的なアプリケーションを構築できます。
この記事では、WebSocket の基本、Socket.IO を使用する利点、Node.js でリアルタイム アプリケーションを作成する方法について説明しました。さらに、WebSocket 接続を保護して送信中のデータの安全性を確保する方法も検討しました。
これらのテクノロジーをマスターすると、強力でインタラクティブでスケーラブルな Web アプリケーションを構築するためのさまざまな可能性が開かれます。
以上がWebSocket と Socket.IO: Node.js とのリアルタイム通信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
