` 来接收消息:
```html
-
+
-
+
```
-JavaScript 代码也很简单。我们打开一个 socket,然后提交表单 —— `socket.send(message)`,对于传入的消息 —— 附加到 `div#messages` 上即可:
+在 JavaScript 中,我们想要做三件事:
+1. 打开连接。
+2. 在表单提交中 —— `socket.send(message)` 用于消息。
+3. 对于传入的消息 —— 将其附加(append)到 `div#messages` 上。
+
+代码如下
```js
let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws");
-// form 发送消息
+// 从表单发送消息
document.forms.publish.onsubmit = function() {
let outgoingMessage = this.message.value;
@@ -304,7 +306,7 @@ document.forms.publish.onsubmit = function() {
return false;
};
-// div#messages 显示消息
+// 收到消息 —— 在 div#messages 中显示消息
socket.onmessage = function(event) {
let message = event.data;
@@ -314,15 +316,14 @@ socket.onmessage = function(event) {
}
```
-服务端代码有点超出我们的范围。我们使用的是浏览器 WebSocket API,服务端有其他库可用。
+服务端代码有点超出我们的范围。在这里,我们将使用 Node.js,但你不必这样做。其他平台也有使用 WebSocket 的方法。
-但它仍然很简单。我们将 Node.js 与
模块一起用于 Websocket。
+服务器端的算法为:
-服务端算法为:
-1. 创建 `clients = new Set()` —— 一系列 sockets。
-2. 对于每个可接受的 Websocket,`clients.add(socket)` 并为其消息添加 `message` 事件侦听器。
-3. 当接收到消息:迭代所有客户端,并将消息发送给每个人。
-4. 当连接关闭时:`clients.delete(socket)`。
+1. 创建 `clients = new Set()` —— 一系列 socket。
+2. 对于每个被接受的 WebSocket,将其添加到 `clients.add(socket)`,并为其设置 `message` 事件侦听器以获取其消息。
+3. 当接收到消息:便利客户端,并将消息发送给所有人。
+4. 当连接被关闭:`clients.delete(socket)`。
```js
const ws = new require('ws');
@@ -331,8 +332,8 @@ const wss = new ws.Server({noServer: true});
const clients = new Set();
http.createServer((req, res) => {
- // 我们在这里仅处理 Websocket 连接
- // 在实际例子中我们将会有其他代码来处理非 Websocket 请求
+ // 在这里,我们仅处理 WebSocket 连接
+ // 在实际项目中,我们在这里还会有其他代码,来处理非 WebSocket 请求
wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);
});
@@ -340,7 +341,7 @@ function onSocketConnect(ws) {
clients.add(ws);
ws.on('message', function(message) {
- message = message.slice(0, 50); // 最大消息长度为 50
+ message = message.slice(0, 50); // message 的最大长度为 50
for(let client of clients) {
client.send(message);
@@ -354,35 +355,34 @@ function onSocketConnect(ws) {
```
-这里是运行示例:
+这是运行示例:
[iframe src="chat" height="100" zip]
-你也可以下载它(点击 iframe 右上角按钮可下载)然后在本地运行。运行之前请记得安装 [Node.js](https://nodejs.org/en/) 和 `npm install ws`。
-
+你也可以下载它(点击 iframe 右上角的按钮)然后在本地运行。运行之前请记得安装 [Node.js](https://nodejs.org/en/) 和 `npm install ws`。
## 总结
WebSocket 是一种在浏览器和服务器之间建立持久连接的现代方式。
-- WebSockets 没有跨域限制。
-- 浏览器对 WebSockets 支持很好。
+- WebSocket 没有跨源限制。
+- 浏览器对 WebSocket 支持很好。
- 可以发送/接收字符串和二进制数据。
-WebSockets 的 API 很简单。
+WebSocket 的 API 很简单。
-WebSockets 方法:
+WebSocket 方法:
- `socket.send(data)`,
- `socket.close([code], [reason])`。
-WebSockets 事件:
+WebSocket 事件:
- `open`,
- `message`,
- `error`,
- `close`。
-WebSocket 自身并不包含重新连接(reconnection),身份验证(authentication)和许多其他高级机制。因此有针对于此的客户端/服务端的库,并且可以手动实现这些功能。
+WebSocket 自身并不包含重新连接(reconnection),身份验证(authentication)和很多其他高级机制。因此,有针对于此的客户端/服务端的库,并且也可以手动实现这些功能。
-有时候,为了将 WebSocket 集成到现有项目中,人们将主 HTTP 服务与 WebSocket 服务并行运行,并且它们之间共享同一个数据库。对于 WebSocket 请求使用一个通向 WebSocket 服务器的子域 `wss://ws.site.com`,而 `https://site.com` 则转到主 HTTP 服务器。
+有时为了将 WebSocket 集成到现有项目中,人们将主 HTTP 服务器与 WebSocket 服务器并行运行,并且它们之间共享同一个数据库。对于 WebSocket 请求使用一个通向 WebSocket 服务器的子域 `wss://ws.site.com`,而 `https://site.com` 则通向主 HTTP 服务器。
-当然,其他集成方式也是可行的。许多服务器(例如 Node.js)可以同时支持 HTTP 和 WebSocket 协议。
+当然,其他集成方式也是可行的。