大话webSocket

众所周知，在浏览器中。我们大部分的业务HTTP都是单次的，如：

• Q：我告诉爸爸要吃巧克力
• A：爸爸给了我最爱吃的巧克力
• 结束

但是有些时候，我们必不可少的需要进行交流，如：

• Q：爸爸我们去买零食
• A：好的儿子
• Q：爸爸我要吃巧克力
• A：好勒，儿子
• Q：爸爸，我还要吃雪糕
• A:   好勒，儿子
• Q：爸爸，我还要
• A： ......

这种情况就属于对话轮询的范畴勒，如果使用HTTP来进行请求轮询是非常。以上两种都是我们主动发起请求，而最后一种情况，如：

• A：儿子，爸爸带你去买零食
• Q： QAQ

这种又对方主动发起来的会话，也是比较常见的。但是，HTTP 协议无法实现服务器主动向客户端发起消息。

webSocket是什么?

• 建立在 TCP 协议之上的网络通信协议
• 不存在跨域问题
• 无http状态的请求
• 全双工通讯协议
• 阮一峰大神图镇

webSocket API

我们通过实例化可以创建一个webSocket的对象

const socketHttp = new WebSocket(url: string)
复制代码

webSocket属性

• socketHttp.readyState ：它指明了当前socket的连接状态，0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
• socketHttp.bufferedAmount：它表明了send()发送消息预备的文本流长度。

webSocket方法(函数)

• open()：打开socket进行创建
• message()：socket推送的消息都会在message中呈现，它的第一个参数就是message文本了。
• error()：当连接发生错误时，会触发error事件。我们可以在这里对它进行错误的处理，如重新连接。
• close()：关闭socket时触发

// 创建socket
const ws = new WebSocket('http://localhost:2349')

ws.onopen = function () {
    // 连接成功
    consta messgae = {
        name: 'wangfanghua',
        text: 'hello !!!'
    }
    // 给后台发送一个JSON文本。
    ws.send(JSON.stringify(messgae))
    console.log('open消息', '连接成功')
}

// 消息队列
ws.onmessage = function (res) {
    console.log('message消息', res)
}

// error错误
ws.onerror = function() {
    console.log('error消息')
}

// 关闭连接
ws.onclose = function () {
    console.log('close消息')
}
复制代码

总结

webSocket的功能大部分就是处理HTTP无法做到的消息对话处理，实时数据的获取，如：聊天信息，设备状态，实时消息......等等一系列属于消息类请求的实现。更高深的就是一些码流的推送，如流媒体，音视频等等。其实Socket看着难，但是上手无非就是，接收消息 & 发送消息 -> 获取回执 -> 处理 .... 等过程。希望大家不要去害怕它，毕竟Socket.io一些库已经非常完善了。