Socket|Nodejs专题系列 | 前端进阶之旅 - 前端求职面试刷题宝典

# WebSocket

# 一、WebSocket 解决了什么问题

客户端(浏览器)和服务器端进行通信，只能由客户端发起ajax请求，才能进行通信，服务器端无法主动向客户端推送信息
当出现类似体育赛事、聊天室、实时位置之类的场景时，客户端要获取服务器端的变化，就只能通过轮询(定时请求)来了解服务器端有没有新的信息变化

轮询效率低，非常浪费资源(需要不断发送请求，不停链接服务器)

WebSocket的出现，让服务器端可以主动向服务器端发送信息，使得浏览器具备了实时双向通信的能力,这就是WebSocket解决的问题

一个超简单例子

新建一个html文件，将本栗子找个地方跑一下试试，即可轻松入门WebSocket

function socketConnect(url) {
    // 客户端与服务器进行连接
    let ws = new WebSocket(url); // 返回`WebSocket`对象，赋值给变量ws
    // 连接成功回调
    ws.onopen = e => {
        console.log('连接成功', e)
        ws.send('我发送消息给服务端'); // 客户端与服务器端通信
    }
    // 监听服务器端返回的信息
    ws.onmessage = e => {
        console.log('服务器端返回：', e.data)
        // do something
    }
    return ws; // 返回websocket对象
}
let wsValue = socketConnect('ws://121.40.165.18:8800'); // websocket对象

@前端进阶之旅: 代码已经复制到剪贴板

上述栗子中WebSocket的接口地址出自：WebSocket 在线测试，在开发的时候也可以用于测试后端给的地址是否可用

# 二、webSocket的class类

当项目中很多地方使用WebSocket，把它封成一个class类，是更好的选择

class WebSocketClass {
    /**
     * @description: 初始化实例属性，保存参数
     * @param {String} url ws的接口
     * @param {Function} msgCallback 服务器信息的回调传数据给函数
     * @param {String} name 可选值 用于区分ws，用于debugger
     */
    constructor(url, msgCallback, name = 'default') {
        this.url = url;
        this.msgCallback = msgCallback;
        this.name = name;
        this.ws = null;  // websocket对象
        this.status = null; // websocket是否关闭
    }
    /**
     * @description<