初尝Websocket，我大意了熬

编程

发布日期: 2020-12-04

更新日期: 2022-05-27

文章字数: 1.1k

阅读时长: 3 分

话不多说，上需求，公司项目：做一个停车场显示车辆余位的大屏，就显示余位数可以了，很简单嘛，直接websocket就完事了，因为之前帮着一起改过一款即时通软件，里面用的就是websocket，所以感觉没啥难的，文档稍微瞄了瞄就开始写代码，结果自己踩了一个坑，然后仔细看了看文档，才从坑里爬出来，所以不熟悉的东西做的时候也要重视下，不能小看他们了，好啦，复盘检讨完毕。

所以呢，我们好好学一下Websocket，let’s go！

Websocket的诞生

在客户端和服务端中交互中最常见的是Http协议，由客户端主动发起请求给服务端，服务端收到请求后再把数据传给客户端，但是在一些场景下，我们希望服务端主动发给我消息，这里有一个分支诞生了，那就是轮询，轮询就是客户端一直在给服务端发请求，这个操作不但效率低而且浪费资源，随之就出现了Websocket，当服务端与客户端建立连接后，服务端可以主动推消息给客户端，客户端当然也可以发消息给服务端，wow～这真是一个好东西。

轮询：

客户端： “喂，服务端你吃好饭了吗？吃好了我们一起打游戏”

服务端： “还没吃呢，等会儿”

客户端： “喂，服务端你吃好饭了吗？吃好了我们一起打游戏”

服务端： “还没吃呢，等会儿”

客户端： “喂，服务端你吃好饭了吗？吃好了我们一起打游戏”

服务端： “还没吃呢，等会儿”

客户端： “喂，服务端你吃好饭了吗？吃好了我们一起打游戏”

websocket：

客户端： “服务端，你吃好饭了，我们一起打游戏” （建立连接）

这时候客户端可以做些别的事情，等服务端吃好饭

服务端： “我吃好饭了，走，打游戏去” （服务端自己推送消息给客户端，仅需满足建立连接的条件即可）

特点

数据格式比较轻，性能开销小，通信高效
没有同源限制（跨域），客户端直接可以与任意服务器通信
协议标示符ws，加密的话就是wss

简单的一个例子

let wsUrl = "xxxxx"; // 约定好的ws地址
let ws = new WebSocket(wsUrl); // 创建ws对象
ws.onopen = function(msg) {
  console.log("连接成功", msg); // 连接成功后调用
}
ws.onmessage = function(msg) {
  console.log("收到消息", msg); // 接收到消息后调用
}
ws.onclose = function(msg) {
  console.log("连接已关闭",msg); // 连接关闭后调用
}
ws.onerror = function(err) {
  console.log("连接错误", err); // 连接发生错误时调用
}
ws.send(msg) ; // 客户端往服务端发送消息