本文详细介绍前端如何使用 WebSocket 进行实时双向通信。涵盖基础 API 用法、Vue 组件集成、消息对象组装（JSON格式）以及发送与接收的完整代码示例，包含错误处理与跨域注意事项。
序言
本文旨在讲解前端技术中如何利用 WebSocket 协议发送和接收消息。
1 基础介绍
1.1 什么是WebSocket
WebSocket 是一种基于单个 TCP 连接实现全双工通信的网络协议。它允许客户端与服务器之间建立持久连接，从而支持实时的双向数据传输。与传统 HTTP 请求不同，WebSocket 无需重复建立连接，能够持续保持通信状态，适合高频数据交互场景。
在 WebSocket 通信模型中，客户端和服务器均具备发送和接收消息的能力。
客户端可通过 JavaScript 提供的 WebSocket API 向服务器推送数据，同时监听并处理服务器返回的消息。
1.2 代码示例
以下是一个使用原生 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);
};在上述代码中，首先实例化一个 WebSocket 对象并指定服务器地址。随后在
onopen回调函数中执行消息发送操作。当服务器向客户端推送数据时，onmessage回调函数将被触发以处理接收到的消息。若发生连接错误或连接被关闭，onerror和onclose回调函数会被调用，用于处理相应的异常或状态变更事件。需特别注意，发送消息前必须确保 WebSocket 连接已成功建立。上述示例中，通过创建 WebSocket 对象来初始化连接，并在
onopen回调函数中发送消息。若在连接未建立时尝试发送数据，消息发送将会失败。
2 案例讲解
2.1 vue怎么用websocket发送请求
在 Vue 框架中使用 WebSocket，可通过实例化
WebSocket对象来建立连接，并利用send()方法向服务器发送具体消息内容。
下面展示一个基础的 Vue 组件示例，演示如何集成 WebSocket 进行消息的发送与接收：
<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>在上述代码结构中：
- 在组件的 created 生命周期钩子中实例化 WebSocket 对象，并注册消息处理函数 handleMessage。
- 在 sendMessage 方法中，将用户输入的内容通过 WebSocket 发送至服务器。
- 在 handleMessage 方法中，解析从服务器接收到的数据，并将其追加到 messages 数组，以便在界面渲染显示。
- 在组件销毁前，必须调用 close() 方法以主动关闭 WebSocket 连接，释放资源。
使用 WebSocket 时还需关注跨域问题。若 WebSocket 连接的 URL 与当前页面域名不一致，需在服务器端配置相应的跨域策略。此外，发送和接收消息时应注意数据格式，通常建议将数据序列化为 JSON 字符串进行传输。
2.2 this.message 怎么组装
在上述 Vue 组件中，
this.message用于存储用户输入的消息文本，可通过绑定v-model指令实现数据的双向绑定。
用户输入消息后，可直接将该文本发送至服务器。在发送前，可根据业务需求对消息结构进行组装，例如附加发送者标识、时间戳等字段，以便服务器端进行更精细的处理。
以下示例假设发送的消息格式为包含文本和时间戳的 JSON 对象：
<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>在上述代码逻辑中：
- this.message 是一个包含 text 和 timestamp 两个属性的对象。当用户输入消息后，将输入的文本赋值给 text 属性。
- 在发送消息前，将当前系统时间戳赋值给 timestamp 属性，随后将该消息对象转换为 JSON 字符串，并通过 WebSocket 连接发送出去。
- 接收到服务器返回的消息后，将 JSON 字符串反序列化为消息对象，并将其推入 messages 数组，从而在界面上展示出来。
2.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
}在上述代码中：
- 首先创建 WebSocket 对象，并在
onopen回调函数中发送一条 WebSocket 请求数据。 - 在
onmessage回调函数中处理服务器返回的响应数据。 - 在
onerror回调函数中处理 WebSocket 连接过程中出现的错误。
优化
为提升代码复用性，将发送 WebSocket 请求的逻辑封装在
sendWebSocketRequest函数中，以便在其他组件中直接调用。例如：
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)
})在上述代码中，调用
sendWebSocketRequest函数发送 WebSocket 请求，并在请求成功或失败时打印相应的日志信息。
2.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，表示请求成功，可在控制台打印返回的数据；否则表示请求失败，应在控制台打印错误信息。
至此，关于前端如何使用 WebSocket 发送消息的示例介绍完毕。如需了解更多相关内容，可搜索本站历史文章或继续浏览后续文章，感谢支持！