websocket协议是什么
我们经常浏览浏览器的页面,里面的数据大都是请求得来的,而这些请求都是客户端发起的,我们常发请求使用http协议,是无法让服务器反向主动通信得,而websocket协议实现了全双工通信,服务器可以主动向客户端发送消息,使用websocket必须要求后端的支持
可以用来做什么?
websocket协议可以很方便的实现聊天室功能
如何建立websocket连接
Socket.IO
对比axios,websocket也有自己的封装组件库,叫Socket.IO
使用npm安装npm i socket.io-client
先引入Socket.IO,获取其实例io
import { io } from "socket.io-client"
Socket.IO的API
1.发请求建立连接
socket = io(baseURL, 参数)
2.监听各种消息,做对应处理
socket.on('消息名', 处理函数)
socket.on('connect',console.log('连接成功')
3.发消息
socket.emit(消息名, 消息内容)
4.在组件销毁的时候关闭连接
在onUnmounted distoryed钩子里
socket.close()
websocket的心跳机制
当网络不佳,或者服务器资源不足等其他原因时,服务器和客户端可能会断开长连接,因此客户端必须每隔一段时间都向服务端发送一个确认消息,如果未发送成功,则客户端主动再次创建连接,这个机制就是心跳机制
除了客户端发送确认信息这种方式以外,也有在服务端发送的方式,都是每隔一段时间发送一个确认消息,原理相同