序言
今天来学习一下前端如何使用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 连接。在上面的代码中，通过创建一个 WebSocket 对象来建立连接，然后在
onopen回调函数中发送消息到服务器。如果在连接建立之前就尝试发送消息，那么这些消息将无法发送成功。
2 案例讲解
2.1 vue怎么用websocket发送请求
在 Vue 中使用 WebSocket，可以借助
WebSocket对象来创建 WebSocket 连接，并通过send()方法向服务器发送消息。
下面是一个基本的 Vue 组件，演示如何使用 WebSocket 发送和接收消息：
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)}}}
- {{ msg }}
在上面的代码中，
- 首先在
created钩子函数中创建了一个 WebSocket 对象，并添加了一个消息处理函数handleMessage。- 在
sendMessage方法中，将用户输入的消息发送到服务器。- 在
handleMessage方法中，将从服务器接收到的消息添加到messages数组中，从而可以在界面上显示出来。- 在组件销毁之前，需要调用
close()方法关闭 WebSocket 连接。
需要注意的是，在使用 WebSocket 时，需要考虑跨域问题。如果 WebSocket 连接的 URL 和当前页面的 URL 不同，那么需要在服务器端进行相应的跨域设置。同时，需要注意在发送和接收消息时的数据格式，通常需要将数据转换为 JSON 字符串进行传输。
2.2 this.message 怎么组装
在上面的 Vue 组件中，
this.message是用户输入的消息文本，可以通过绑定v-model实现双向绑定。
当用户输入消息后，可以将消息文本直接发送到服务器。在发送消息之前，可以根据需要对消息进行组装，例如添加消息的发送者、时间等信息，以便在服务器端进行更好的处理。
以下是一个示例，假设要发送的消息格式为一个包含文本和时间戳的 JSON 对象：
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)}}}
- {{ msg.text }} ({{ msg.timestamp }})
在上面的代码中，
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函数中，可以在其他组件中直接调用该函数来发送 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)})在上面的代码中，调用
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，表示请求成功，可以在控制台打印返回的数据；否则，表示请求失败，可以在控制台打印错误信息。
3 图书推荐
图书名称：《同构：编程中的数学》
“数学是思维的体操。”而编程是一项高度复杂的思维活动。学习数学思想对编程的益处不言而喻。
《同构：编程中的数学》从数字、递归、对称、范畴、融合、无穷、悖论七个方面介绍了计算机程序的数学基础和原理，并以“同构”概念为线索揭示出编程本质上是和数学同构的。
小伙伴可以先睹为快：《同构：编程中的数学》
内容简介
本书从数字、递归、对称、范畴、融合、无穷、悖论七个方面介绍了计算机程序的数学基础和原理，并以“同构”概念为线索揭示出编程本质上是和数学同构的。
- 第1章介绍皮亚诺算术公理系统,通过5条公理，构筑了计算机程序大厦的基石;通过单向链表、斐波那契数列等例子，展示了和自然数同构的计算结构。
- 第2章介绍递归，通过欧几里得算法作为开端，最终把递归的数学原理构建在Lambda演算和Y组合子之上。
- 第3章介绍对称群、环、域等抽象代数结构，解释了伽罗瓦理论这一抽象思维的明珠。
- 第4章介绍范畴论，把列表、异常、多态、类型系统、复合数据结构等众多编程概念构筑在范畴论的基础上。
- 第5章介绍融合律，它是进行算法推导和优化的有力工具。
- 第6章介绍无穷，给出了康托尔的无穷集合论和超限数概念，介绍了编程中流的概念和无穷的关系。
- 第7章以罗素悖论、可计算性和哥德尔不完全性定理结束本书，介绍了计算能力的边界和对编程基础哲学的影响。
本书还在各个章节中介绍相关数学家的人生经历和逸闻趣事，讲解他们如何克服困难、追求真理、创造奇迹，并穿插讲述编程、数学、艺术、音乐之间的有趣联系。
作者简介
刘新宇
亚马逊中国研发中心研发经理，负责分布式仓储物流系统的开发。
1999年和2002年在清华大学自动化系分别获得学士和硕士学位。长期专注于函数式基础算法，著有《算法新解》一书（2017年出版）。
参与方式
图书数量：本次送出 4本！！！⭐️⭐️⭐️
活动时间：截止到 2023-07-0412:00:00抽奖方式：
- 在新星计划【云原生之k8s入门】方向参加的小伙伴中随机抽取
参与方式：
- 参加新星计划【云原生之k8s入门】，并提交任务。
- 活动参与链接：https://bbs.csdn.net/topics/616338210
参与方式：关注博主、点赞、收藏，参与活动
中奖名单
获奖名单
中奖名单：请关注博主动态
名单公布时间：2023-07-04下午