1. WebSockets通信的基础知识
WebSockets是HTML5提供的在WEB应用程序中客户端和服务器端之间进行的非HTTP的通信机制。可以实现双向通信，除非被显示关闭。一旦服务器想发送数据给客户端时，可以通过建立的socket将数据推送到客户端浏览器，无需重新建立连接。
2. API的使用
- 通过URL创建websocket对象
var ws = new WebSocket("ws://localhost:8080/socket") - 发送文本数据
ws.send("我是客户端发送的数据") - 通过ws实例的open事件监听连接状态
ws.onopen = function(event){ //开始通信时的处理 } - 通过ws实例的message事件获取服务器发送过来的数据
ws.onmessage = function(event){ console.log(event.data) } -
通过ws实例的close事件来监听ws的关闭状态
ws.onclose = function(event){ //关闭时的处理操作 } -
主动关闭ws连接
ws.close();
3. ws的使用示例
private mounted() {
let { id } = this.$route.query
if (id) {
this.id = id
}
this.connect()
}
private destroyed() {
if (this.ws) {
this.ws.close()
}
}
private connect() {
// 1. 创建websocket对象，参数为服务器websocket地址
let path = `${prefix}/ws/get_task_log?id=${this.id}`
this.ws = new WebSocket(`ws://${window.location.host}${path}`)
// 2.监听websocket的状态变化，接收的信息，关闭时的状态
//监听连接状态的变化
this.ws.onopen = () => this.socketChange()
//监听接收消息的情况
this.ws.onmessage = event => {
let strData = atob(event.data)
if (this.switchValue === 'on') {
this.codeValue += strData
}
}
//监听关闭时的状态变化
this.ws.onclose = () => this.socketChange()
}
socketChange() {
let state = this.ws.readyState
let val = this.statusArr.find(item => {
return item.state == state
})
//实时显示状态的变化
console.log(`当前的socket连接状态是: ${val?.value}`)
}
