前言
什么是websocket？
WebSocket 是一种网络通信协议，就类似于 HTTP 也是一种通信协议。WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工（通讯双方既是接收方也是发送方，两端设备可以同时发送和接收数据）通讯的协议。
为什么需要websocket？
因为 HTTP 协议有一个缺陷：HTTP协议只能从客户端发出请求，服务器处理返回请求; 但是服务器不能主动给客户端发送请求， 于是解决服务器推送的问题，就只能靠轮询了。
- 短轮询：定时发送http请求
- 长轮询：发送请求直到收到消息或者超时后继续发送下一个请求
// 但是，轮询并不能完美的解决服务器推送的问题
- 服务器无法主动发送数据
- 轮询实时性差
- 轮询浪费较多资源
- 协议名称不同
ws和http - http 一般只能浏览器发起请求，webSocket 可以双端发起请求
- WebSocket没有跨域限制
- WebSokect通过 send 和 onmessage 通讯;
- Http 通过request
PS：
ws可以升级为wss协议，像http升级到https一样，增加SSL安全协议。
了解WebSocket 的API
此时模拟了点击按钮发送消息,和点击按钮关闭连接通讯场景:
代码截图如下:
PS：最关键的是
ws.send方法去发送消息 ,ws.onmessage事件来接收消息。
打印结果如下:
源代码如下:
<body>
<button id="ClickPost">发送消息</button>
<button id="ClickOver">关闭连接</button>
</body>
<script>
// !#1. 创建ws实例，建立连接 (ws://121.40.165.18:8800 有广告)
var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
// !#2. 通过ws.onopen 连接成功,就会自动触发onopen事件
ws.onopen = function(evt) {
console.log("Connection open ...");
};
ClickPost.onclick= function(){
// !#3. 通过ws.send 发送消息
ws.send("你好,websocket!")
}
// !#4. 通过ws.onmessage 接收消息事件
ws.onmessage = function(evt) {
console.log("Received Message: " + evt.data);
};
ClickOver.onclick = function(){
// !#5. 通过ws.close 关闭连接
ws.close();
}
// !#6. 通过ws.onclose 关闭连接事件
ws.onclose = function(evt) {
console.log("Connection closed.");
};
</script>
使用socket.io-client 来实现客户端代码
socket.io-client 它是一个基于WebSocket 的 CS（客户端-服务端）的实时通信库，使用它可以在后端提供一个即时通讯服务，它提供的也有一个 JS 库，在前端可以去链接后端 socket.io 创建的服务。
安装:
npm i socket.io-client 或
pnpm add socket.io-client
如何建立连接
import io from 'socket.io-client'
// 参数1：不传默认是当前服务域名，开发中传入服务器地址
// 参数2：配置参数，根据需要再来介绍
const socket = io()
如何确定连接成功：
socket.on('connect', () => {
// 建立连接成功
})
如何发送消息：
// chat message 发送消息事件，由后台约定，可变
socket.emit('chat message', '消息内容')
如何接收消息：
// chat message 接收消息事件，由后台决定，可变
socket.on('chat message', (ev) => {
// ev 是服务器发送的消息
})
如何关闭消息：
// 离开组件需要使用
socket.close()
socket.on('disconnect', () => {
console.log('连接关闭')
})
结尾
WebSocket为现代Web应用程序提供了强大的实时通信能力，为开发者们带来了更多可能性。希望本文对你理解websocket, 并在实际项目中应用WebSocket有所帮助。Happy coding！
逐字稿:
websocket 是一个类似于HTTP的一种通信协议。不同的是 webscoket 通讯的双方既是接收方也是发送方，(两端设备可以同时发送和接收数据）的一种全双工通讯协议。
原生的websocket 使用是先创建ws实例,然后通过ws.send发消息,监听onmessage 事件来接收消息, 不过实际开发中呢,我比较喜欢用socket.io-client 包因为他比较方便些,把这个包调用一下io( )函数,传入后端websocket的接口地址和后端要求的参数,生成一个socket 实例,然后通过socket.emit( ‘chat message’ , ‘消息内容’ )触发一个事件去发消息,通过socket.on(‘chat message’ , ‘消息内容’ )监听一个事件去接收消息, ‘chat message’ 事件名称是后端规定的,可以改变;
