WebSocket
1.什么是WebSocket?
WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范,WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
2.为什么要使用WebSocket?
HTTP 协议是一种无状态的、无连接的、单向的应用层协议,它采用了请求/响应模型,通信请求只能由客户端发起,服务端对请求做出应答处理。
在前端开发方面,当我们想要了解我们处理的某个事件的状态时,需要由服务端来告诉我们这件事情处理得怎么样了,如果采用HTTP请求的方式,需要进行轮询的请求方式才可以得到我们想要的结果,这种方式效率低,浪费资源,也不具备实时性,因为轮询的时间也不好确定。
而Websocket可以在客户端和服务端之间建立长连接,任意一方都可以互相发送和接收消息,比采用轮询的方式方便多了。
3.在vue3开发中的应用
开源工具库VueUse提供的useWebSocket钩子函数,具体使用方式可参考useWebSocket,这里就不作详细介绍了。
由于最近在了解node如何搭建WebSocket服务端,为了更方便测试,前端方面也在尝试对WebSocket客户端进行封装,下方为封装的ws.ts的代码。
// ws.ts
import { ref } from 'vue'
/** WebSocket */
export class Ws {
/** ws */
private ws: WebSocket | null
/** 连接状态 */
public socketStatus: boolean
/** 消息内容 */
public message: any
constructor() {
this.ws = null
this.socketStatus = false
this.message = ref()
}
/** 建立连接 */
connect(url: string) {
this.ws = new WebSocket(url)
this.ws.onopen = this.onopen.bind(this)
this.ws.onmessage = this.onmessage.bind(this)
this.ws.onclose = this.onclose.bind(this)
this.ws.onerror = this.onerror.bind(this)
}
/** 连接成功 */
onopen() {
this.socketStatus = true
console.log('websocket连接成功', this.ws)
}
/** 接收消息 */
onmessage(e: { data: string }) {
this.message.value = JSON.parse(e.data)
console.log('接收消息', JSON.parse(e.data))
}
/** 连接关闭 */
onclose() {
this.socketStatus = false
console.log('websocket连接关闭')
}
/** 连接失败 */
onerror(e: any) {
this.socketStatus = false
console.log('websocket连接失败', e);
}
/** 发送消息 */
send(message: any) {
if (this.ws && this.socketStatus) {
this.ws.send(JSON.stringify(message))
console.log('发送消息', message)
}
}
}
如上方代码所见,我们定义了一个Ws类,其包含了ws、socketStatus和message等3个属性,ws是WebSocket的实例化对象;socketStatus是ws连接状态,类型为boolean,可用于判断ws连接是否成功;
message是所接收到的服务端发来的消息,可根据消息内容的事件(event)不同来执行不同的操作。
Ws类包含了connect、onopen、onmessage、onclose、onerror和send等6个方法
-
connect用于创建ws连接,需要传入一个url参数,即服务端的建立的ws链接
-
onopen是在建立连接成功后执行的,在此我们将socketStatus的值更改为true
-
onmessage负责接收消息,在此我们将message更改为服务端发送来的消息
-
onclose是连接关闭时执行的,在此我们将socketStatus的值更改为false
-
onerror是连接失败时执行的,在此我们将socketStatus的值更改为false
-
send用于给服务端发送消息,只有当socketStatus为true时才会执行。
在vue3项目开发中,我们一般会将建立一个挂载在vue全局的ws连接,并通过发送和接收的消息内容的事件(event)的不同来执行不同的操作。
在vue3项目的main.ts中引入ws.ts文件,并建立连接和发送消息。
引入ws并建立连接
// 实例化ws
const ws = new Ws()
// 将ws挂载到vue全局
app.config.globalProperties.$ws = ws
// 创建连接
ws.connect('ws://localhost:17030')
// 判断是否连接成功,如成功则发送消息
let timerID = setInterval(() => {
if (ws.socketStatus) {
console.log('ws已连接成功');
ws.send({
event: 'hello',
data: '服务端你好'
})
clearTimeout(timerID)
return
}
console.log('ws正在连接中...');
}, 500)
在具体某个业务的vue文件中,我们可以通过watch来监听接收到的消息。
当接收到服务端发送的消息时,可根据消息的事件(event)来处理对应的业务。
在vue文件中监听消息变化
import { getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
watch(() => proxy.$ws.message, (message) => {
console.log('当前页面接收到消息', message.value);
if(message.value.event === 'handle') {
console.log('当事件为handle时,这里处理hanldle对应的业务');
}
},
{ deep: true }
)