WebSocket-战火平息

最新推荐文章于 2024-03-07 23:13:00 发布

不见浅诗～

最新推荐文章于 2024-03-07 23:13:00 发布

阅读量222

点赞数

分类专栏： Node.js 文章标签： node.js websocket

本文链接：https://blog.csdn.net/EcbJS/article/details/106909022

版权

Node.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本篇文章参考以下博文

文章目录

前言

这几天在跟测试同事的友（chà）好（diǎn）交（dòng）流（shǒu）当中，总结了一下关于 WebSocket 的相关使用方法。

事情的经过是这样的，测试同事先打开了页面，一顿操作后感觉不过瘾，又登上服务器，修改了点数据，然后回来查看页面，修改的数据没有被更新。于是叫来了开发，帮忙定位一下怎么回事，开发看了一遍操作后，出现了如下对话：

开发：“你怎么不刷新界面”。

测试：“我为什么要刷新界面？”

开发：“你不刷新界面，我怎么获取最新的数据”。

测试：“那一个人修改服务端的数据了，所有人都得刷新界面才能看到呗”。

开发：“可不咋地”。

测试：“那你这个有缺陷，打回去重新做”。

开发：“别别别，要不这样，我加个按钮，你修改数据了，点一下按钮就行，不用全部更新”。

测试：“我为什么要点按钮？”

开发：“大哥你不点按钮我没法调用接口查数据”。

测试：“那你页面刚打开的时候怎么查的数据”。

开发：“刚打开的时候是在生命周期里调用的”。
测试：“那现在也在那个什么星期里调呗”。

开发：“那个周期早结束了，现在必须有操作，我才能调”。

测试：“我操作了呀，修改服务器数据了”。

开发：“…操作服务器我获取不到，你得操作界面”。

测试：“那要是几万人在浏览界面，有人修改服务器数据了，那几万人都得刷新才能看到呗”。

开发：“一般也没人动服务器”。

测试：“你怎么知道没有，万一呢”。

开发：“我…”

测试：“你这个有缺陷，打回去重做”。

开发：“别别别，你看这应该属异常操作，我们下去研究研究怎么改”。

测试：“好嘞，快点哈，我还得发测试进展呢”。

（我尽力在把图片和文字对齐了，但是 csdn 的 markdown 不支持 style 属性，属性添加无效，有没有大神点拨一下）

进入正题

上面开发与测试的交流中，无非就是服务端不能主动向客户端发送消息，这是因为HTTP协议是 请求-响应 模式，这就只能通过客户端发送请求，然后服务端响应数据。

为了打破这个缺陷， WebSocket 应运而生，现在浏览器都支持这个协议，可以放心使用。

一、客户端配置

下面就是一个 WebSocket 的实际应用，客户端的配置是比较简单的，语义也都很明确。

var ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

1.1 创建连接

var ws = new WebSocket('ws://localhost:8080');

执行上面语句之后，客户端就会与服务器进行连接。就是这么简单，把这条代码写到你希望建立连接的地方就行。

1.2 连接开启

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

如果要指定多个回调函数，可以使用 addEventListener 方法。

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

1.3 接收消息

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

1.4 连接关闭

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

1.5 连接错误

ws.onerror = function(evt) {
  console.log("Connection error.");
};

另外还有一些其他的属性使用方法基本类似，大家可以参考上面。

WebSocket.binaryType
连接使用的二进制数据类型。

WebSocket.bufferedAmount 只读
排队数据的字节数。

WebSocket.extensions 只读
服务器选择的扩展名。

WebSocket.protocol 只读
服务器选择的子协议。

WebSocket.readyState 只读
连接的当前状态。

WebSocket.url 只读
WebSocket的绝对URL。

二、服务端配置

该部分以 node 配置为例。

2.1 安装

npm i nodejs-websocket -S

2.2 服务端配置

//引入模块
var ws = require("nodejs-websocket");

//创建服务
var server = ws.createServer(function(conn){

  //接收到客户端数据时的回调
  conn.on("text", function (str) {
    console.log("message:"+str)
    
    //向客户端推送数据
    conn.sendText("My name is Web Xiu!");
  })
  
  //连接关闭时的回调
  conn.on("close", function (code, reason) {
    console.log("关闭连接")
  });
  
  //连接出错时的回调
  conn.on("error", function (code, reason) {
    console.log("异常关闭")
  });
  
  //监听8001端口
}).listen(8001)