浅析websocket协议

60 阅读1分钟

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的心跳机制

当网络不佳,或者服务器资源不足等其他原因时,服务器和客户端可能会断开长连接,因此客户端必须每隔一段时间都向服务端发送一个确认消息,如果未发送成功,则客户端主动再次创建连接,这个机制就是心跳机制

除了客户端发送确认信息这种方式以外,也有在服务端发送的方式,都是每隔一段时间发送一个确认消息,原理相同