WebSocket は、単一の TCP 接続で実行できる永続的なネットワーク通信プロトコルです。フルダブル産業用通信には、RequestとResponseという概念はなく、両者は完全に同等の状態であり、一度接続が確立されれば双方向のデータ通信が可能となります。クライアントとサーバー間のリアルタイムの通信
long poll を使用することによってのみ行うことができますが、前者では大量の時間がかかります。サーバーに負荷がかかり、後者は応答の待機によりブロックを引き起こします
http1.1 はデフォルトで有効になっていますがTCP チャネル を維持すると、HTTP 接続で複数のリクエストを送信し、複数のレスポンスを受信できますが、1 つのリクエストに含めることができるレスポンスは 1 つだけです。さらに、この反応も受動的であり、能動的に開始することはできません。 GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com
Upgrade: websocket Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13
は、サービスに必要なプロトコルを識別するために使用されるユーザー定義の文字列です。
Sec-WebSocket-Version は、WebSocket のサポートを示しますバージョン。
サーバー応答:
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
101 応答コード は、プロトコルを変換する必要があることを示します。
アップグレード: websocket は、WebSocket プロトコルへのアップグレードを意味します。
Sec-WebSocket-Accept は、サーバーによって確認され、暗号化された Sec-WebSocket-Key です。クライアントとサーバー間で通信が可能であることを証明するために使用されます。
Sec-WebSocket-Protocol は、使用される最終プロトコルを示します。
この時点で、クライアントとサーバーはハンドシェイクを介して Websocket 接続を正常に確立しました。HTTP はすべての作業を完了しました。次のステップは、Websocket プロトコルに完全に従って通信することです。 Websocket について
WebSocket ハートビートSOCKET が切断される原因となる未知の状況が存在する可能性がありますが、クライアントとサーバーはそれを認識せず、クライアントはそれを認識する必要があります。 ##Heartbeat Ping
サーバーにオンラインであることを知らせ、サーバーもHeartbeat Ping
で応答してクライアントに利用可能であることを伝える必要があります。切断されたとみなされますWebSocket ステータスWebSocket オブジェクトのreadyState 属性には 4 つの状態があります。#0: 接続が確立されていることを示します1: 接続が成功し、通信が可能であることを示します。
npm install express ws
//引入express 和 ws
const express = require('express');
const SocketServer = require('ws').Server;
//指定开启的端口号
const PORT = 3000;
// 创建express，绑定监听3000端口，且设定开启后在consol中提示
const server = express().listen(PORT, () => console.log(`Listening on ${PORT}`));
// 将express交给SocketServer开启WebSocket的服务
const wss = new SocketServer({ server });
//当 WebSocket 从外部连接时执行
wss.on('connection', (ws) => {
//连接时执行此 console 提示
console.log('Client connected');
// 对message设置监听，接收从客户端发送的消息
ws.on('message', (data) => {
//data为客户端发送的消息，将消息原封不动返回回去
ws.send(data);
});
// 当WebSocket的连接关闭时执行
ws.on('close', () => {
console.log('Close connected');
});
});WebSocketを開いた後、サーバーはメッセージをリッスンし、パラメーター データを受信してクライアントから送信されたメッセージをキャプチャし、send を使用してメッセージを送信します。クライアントはメッセージを受信および送信します。
<html>
<body>
<script src="./index.js"></script>
</body>
</html>// 使用WebSocket的地址向服务端开启连接
let ws = new WebSocket('ws://localhost:3000');
// 开启后的动作，指定在连接后执行的事件
ws.onopen = () => {
console.log('open connection');
};
// 接收服务端发送的消息
ws.onmessage = (event) => {
console.log(event);
};
// 指定在关闭后执行的事件
ws.onclose = () => {
console.log('close connection');
};上面的url就是本机node开启的服务地址，分别指定连接（onopen），关闭（onclose）和消息接收（onmessage）的执行事件，访问html，打印ws信息
打印了open connection说明连接成功，客户端会使用onmessage处理接收
其中event参数包含这次沟通的详细信息，从服务端回传的消息会在event的data属性中。
手动在控制台调用send发送消息，打印event回传信息:
上面是从客户端发送消息，服务端回传。我们也可以通过setInterval让服务端在固定时间发送消息给客户端:
server.js修改如下:
//当WebSocket从外部连接时执行
wss.on('connection', (ws) => {
//连接时执行此 console 提示
console.log('Client connected');
+ //固定发送最新消息给客户端
+ const sendNowTime = setInterval(() => {
+ ws.send(String(new Date()));
+ }, 1000);
- //对message设置监听，接收从客户端发送的消息
- ws.on('message', (data) => {
- //data为客户端发送的消息，将消息原封不动返回回去
- ws.send(data);
- });
//当 WebSocket的连接关闭时执行
ws.on('close', () => {
console.log('Close connected');
});
});客户端连接后就会定时接收，直至我们关闭websocket服务
如果多个客户端连接按照上面的方式只会返回各自发送的消息，先注释服务端定时发送，开启两个窗口模拟：
如果我们要让客户端间消息共享，也同时接收到服务端回传的消息呢？
我们可以使用clients找出当前所有连接中的客户端 ，并通过回传消息发送到每一个客户端 中：
修改server.js如下:
...
//当WebSocket从外部连接时执行
wss.on('connection', (ws) => {
//连接时执行此 console 提示
console.log('Client connected');
- //固定发送最新消息给客户端
- const sendNowTime = setInterval(() => {
- ws.send(String(new Date()));
- }, 1000);
+ //对message设置监听，接收从客户端发送的消息
+ ws.on('message', (data) => {
+ //取得所有连接中的 客户端
+ let clients = wss.clients;
+ //循环，发送消息至每个客户端
+ clients.forEach((client) => {
+ client.send(data);
+ });
+ });
//当WebSocket的连接关闭时执行
ws.on('close', () => {
console.log('Close connected');
});
});这样一来，不论在哪个客户端发送消息，服务端都能将消息回传到每个客户端 ： 可以观察下连接信息:
纸上得来终觉浅，绝知此事要躬行，希望大家可以把理论配合上面的实例进行消化，搭好服务端也可以直接使用测试工具好好玩耍一波
更多编程相关知识，请访问：编程教学！！
以上がWebSocket について 10 分で簡単に学びましょう! ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
