一、认识websocket
webSocket 是一种在单个 TCP 连接上进行通信的协议，它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。
客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器，也可以接收服务器发送的消息。
var socket = new WebSocket("ws://example.com/socketserver");
socket.onopen = function(event) {
socket.send("Hello server!");
};
socket.onmessage = function(event) {
console.log("Received message from server: " + event.data);
};
socket.onerror = function(event) {
console.log("WebSocket error: " + event.error);
};
socket.onclose = function(event) {
console.log("WebSocket connection closed with code " + event.code);
};
（1）首先创建了一个 WebSocket 对象，指定了服务器的地址。
（2）然后在 onopen 回调函数中，发送了一个消息到服务器。
（3）当服务器发送消息到客户端时，onmessage 回调函数会被触发，从而可以处理服务器发送的消息。
（4）如果出现错误或者连接被关闭，onerror 和 onclose 回调函数会被触发，从而可以处理这些事件。
二、vue使用websocket讲解
1、基本Vue组件
在 Vue 中使用 WebSocket，可以借助 WebSocket 对象来创建 WebSocket 连接，并通过 send() 方法向服务器发送消息。
<template>
<div>
<input v-model="message" @keyup.enter="sendMessage">
<button @click="sendMessage">Send</button>
<ul>
<li v-for="msg in messages">{{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
messages: [],
socket: null
}
},
created() {
this.socket = new WebSocket('ws://localhost:3000')
this.socket.addEventListener('message', this.handleMessage)
},
beforeDestroy() {
this.socket.close()
},
methods: {
sendMessage() {
this.socket.send(this.message)
this.message = ''
},
handleMessage(event) {
this.messages.push(event.data)
}
}
}
</script>
在上面的代码中，
（1）首先在 created 钩子函数中创建了一个 WebSocket 对象，并添加了一个消息处理函数 handleMessage。
（2）在 sendMessage 方法中，将用户输入的消息发送到服务器。
（3）在 handleMessage 方法中，将从服务器接收到的消息添加到 messages 数组中，从而可以在界面上显示出来。
（4）在组件销毁之前，需要调用 close() 方法关闭 WebSocket 连接。
注意：在使用 WebSocket 时，需要考虑跨域问题。如果 WebSocket 连接的 URL 和当前页面的 URL 不同，那么需要在服务器端进行相应的跨域设置。同时，需要注意在发送和接收消息时的数据格式，通常需要将数据转换为 JSON 字符串进行传输。
2、如何组装this.message
this.message 是用户输入的消息文本，可以通过绑定 v-model 实现双向绑定。
当用户输入消息后，可以将消息文本直接发送到服务器。在发送消息之前，可以根据需要对消息进行组装，例如添加消息的发送者、时间等信息，以便在服务器端进行更好的处理。
<template>
<div>
<input v-model="message.text" @keyup.enter="sendMessage">
<button @click="sendMessage">Send</button>
<ul>
<li v-for="msg in messages">{{ msg.text }} ({{ msg.timestamp }})</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
message: {
text: '',
timestamp: null
},
messages: [],
socket: null
}
},
created() {
this.socket = new WebSocket('ws://localhost:3000')
this.socket.addEventListener('message', this.handleMessage)
},
beforeDestroy() {
this.socket.close()
},
methods: {
sendMessage() {
this.message.timestamp = new Date().toISOString()
const json = JSON.stringify(this.message)
this.socket.send(json)
this.message.text = ''
this.message.timestamp = null
},
handleMessage(event) {
const msg = JSON.parse(event.data)
this.messages.push(msg)
}
}
}
</script>
在上面的代码中，
（1）this.message 是一个包含 text 和 timestamp 两个属性的对象，在用户输入消息后，将消息文本赋值给 text 属性。
（2）在发送消息之前，将当前时间戳赋值给 timestamp 属性，并将消息对象转换为 JSON 字符串，然后通过 WebSocket 发送出去。
（3）在接收到服务器发送的消息后，将 JSON 字符串解析为消息对象，并将消息对象添加到 messages 数组中，从而可以在界面上显示出来。
3、发送
如果要发送下面信息：
{
"msg_id": "1",
"msg_type": "test",
"content": {
"count": "10"
}
}
要发送上面 JSON 数据，可以先将其转换为字符串，然后通过 WebSocket 发送出去。
以下是一个示例代码，假设使用 axios 库来发送 WebSocket 请求：
import axios from 'axios'
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
const data = {
msg_id: '1',
msg_type: 'test',
content: {
count: '10'
}
}
const jsonString = JSON.stringify(data)
ws.send(jsonString)
}
ws.onmessage = (event) => {
const response = JSON.parse(event.data)
console.log('Received message:', response)
}
ws.onerror = (error) => {
console.error('WebSocket error:', error)
}
function sendWebSocketRequest(data) {
const jsonString = JSON.stringify(data)
ws.send(jsonString)
}
export default {
sendWebSocketRequest
}
在上面的代码中，
（1）首先创建了一个 WebSocket 对象，并在 onopen 回调函数中发送了一条 WebSocket 请求。
（2）在 onmessage 回调函数中处理服务器返回的响应数据。
（3）在 onerror 回调函数中处理 WebSocket 错误。
优化代码
为了方便使用，将发送 WebSocket 请求的代码封装在 sendWebSocketRequest 函数中，可以在其他组件中直接调用该函数来发送 WebSocket 请求。
import { sendWebSocketRequest } from '@/api/websocket'
sendWebSocketRequest({
msg_id: '1',
msg_type: 'test',
content: {
count: '10'
}
}).then(response => {
console.log('Received response:', response)
}).catch(error => {
console.error('WebSocket error:', error)
})
4、接收
返回参数是这个，该怎么接收呢？
{
"msg_id": "1",
"msg_type": "test",
"code": 0,
"err_msg": "Success.",
"content": {
"count": "20"
}
}
要接收和处理服务器返回的 JSON 数据，可以在 onmessage 回调函数中处理接收到的消息。
以下是一个示例代码，假设使用 axios 库发送 WebSocket 请求
import axios from 'axios'
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
const data = {
msg_id: '1',
msg_type: 'test',
code: 0,
err_msg: 'Success.',
content: {
count: '20'
}
}
const jsonString = JSON.stringify(data)
ws.send(jsonString)
}
ws.onmessage = (event) => {
const response = JSON.parse(event.data)
console.log('Received message:', response)
// 处理返回的数据
if (response.code === 0) {
console.log('Success:', response.content)
} else {
console.error('Error:', response.err_msg)
}
}
ws.onerror = (error) => {
console.error('WebSocket error:', error)
}
function sendWebSocketRequest(data) {
const jsonString = JSON.stringify(data)
ws.send(jsonString)
}
export default {
sendWebSocketRequest
}
在上面的代码中，使用 JSON.parse() 方法将接收到的消息转换为 JSON 对象，并在 onmessage 回调函数中处理返回的数据。如果返回的数据中 code 属性为 0，表示请求成功，可以在控制台打印返回的数据；否则，表示请求失败，可以在控制台打印错误信息。