WebSocket 没用过的同学，听上去，可能觉得很难，其实很简单，本章讲解了WebSocket基本信息，以及附有代码例子
WebSocket 是什么？
WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。（双向通信协议）
WebSocket 的作用？
实现客户端与服务器之间的双向通信，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket 和 HTTP 区别？
相同点：
1. WebSocket 都是一样基于 TCP 的可靠性传输协议；
异同点：
1. WebSocket 可以双向发送或接受信息，而 HTTP 是单向的（HTTP 通信只能由客户端发起，不具备服务器主动推送能力）；
2. WebSocket 的使用，需要先进行一次 客户端与服务器的握手，两者建立连接后才可以正常双向通信，而 HTTP 是一个 主动的 Request 对应一个 被动的Response；
WebSocket 的协议标识符？
如果服务器网址是 HTTP 那么 WebSocket 对应的是 ws
如果服务器网址是 HTTPS 加密的 那么 WebSocket 对应的是 wss
WebSocket 的作用总结？
WebSocket 是为了能够实现在 web 应用上与服务器进行双向通信的需求 而产生出来的协议，文章来源：https://www.toymoban.com/news/detail-407513.html
相比于轮询 HTTP 请求的方式，WebSocket 节省了服务器资源，有效的提高了效率。文章来源地址https://www.toymoban.com/news/detail-407513.html
WebSocket 常用方法
常用方法 描述 Socket.send() 通过 Socket 向服务器发送信息 Socket.close() 关闭 Socket 连接
WebSocket 常用属性
常用属性 描述 Socket.readyState 获取当前链接状态 0:正在连接中，1:连接正常可以通信，2:连接关闭中，3:连接已关闭/连接失败 Socket.url 获取当前连接地址 Socket.binaryType 获取传输的数据类型
WebSocket 生命周期
生命周期 描述 Socket.onopen 连接建立时触发 Socket.onmessage 客户端接收服务端数据时触发 Socket.onerror 通信发生错误时触发 Socket.onclose 连接关闭时触发
// 设定默认值
var websock = null;
// 每10分钟 通过 websocket 向服务器发送一次心跳 证明客户端没有离线 依然在线可以正常接受消息
setInterval(this.websocketsend, 100000);
initWebsocket() {
/*
* 初始化 websock
* 连接 服务器地址
* 并绑定 websock 四个事件方法
*/
this.websock = new WebSocket('ws://localhost:8080?userId=1');
// 接收服务器返回的数据
this.websock.onmessage = this.websocketonmessage;
// 连接建立时触发
this.websock.onopen = this.websocketonopen;
// 连接中发生异常
this.websock.onerror = this.websocketonerror;
// 连接关闭时触发
this.websock.onclose = this.websocketclose;
}
websocketonopen() {
/*
* websocket 初始化后 执行的方法
* 调用 发送数据方法
*/
this.websocketsend();
},
websocketonerror() {
/*
* websocket 连接建立失败 执行的方法
* 注：我这里加了个判断，如果联系建立失败就在连接几次
*/
if(this.cishu < 5){
this.cishu = this.cishu + 1;
this.initWebsocket();
}
},
websocketsend() {
/*
* websocket 数据发送 通过 websock.send() 方法向服务器发送数据
* 注：这里随便发哈，主要作用就是通过这个动作，让客户端与服务端建立联系
*/
let actions = {
"test": "12345"
};
this.websock.send(JSON.stringify(actions));
},
websocketclose(e) {
/*
* websocket 连接关闭 执行的方法
*/
console.log('断开连接', e);
},
websocketonmessage(e) {
/*
* websocket 数据接收 执行的方法
* 注：服务器通过 websocke 向客户端发送数据时，这里的方法就会自动触发啦
*/
const redata = JSON.parse(e.data);
switch (redata.messageType) {
case 0: // 售后 提示
// ... 执行
break;
case 1: // 库存 提示
// ... 执行
break;
case 2: // 下架 提示
// ... 执行
break;
}
},
到了这里，关于HTML5 WebSocket 详解及使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
