# 第一部分 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是否关闭
}
/**
* 
