HTML5 WebSocket 详解及使用

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 应用上与服务器进行双向通信的需求 而产生出来的协议，

相比于轮询 HTTP 请求的方式，WebSocket 节省了服务器资源，有效的提高了效率。

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;
    }
},
 
 

 

 

 

 

 

 

----