【前端系列】前端如何使用websocket发送消息

颜淡慕潇 2024-07-14 08:03:01 阅读 70

序言

今天来学习一下前端如何使用websocket发送消息

1 基础介绍

1.1 什么是WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同,WebSocket 使用了一个长连接,在客户端和服务器之间保持持久的连接,从而可以实时地发送和接收数据。

在 WebSocket 中,客户端和服务器之间可以互相发送消息。

客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器,也可以接收服务器发送的消息。

1.2 代码示例

下面是一个使用 WebSocket API 发送消息的代码示例:

<code>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 发送和接收消息:

<template>

<div>

<input v-model="message" @keyup.enter="sendMessage">code>

<button @click="sendMessage">Send</button>code>

<ul>

<li v-for="msg in messages">{ { msg }}</li>code>

</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 方法中,将用户输入的消息发送到服务器。在 handleMessage 方法中,将从服务器接收到的消息添加到 messages 数组中,从而可以在界面上显示出来。在组件销毁之前,需要调用 close() 方法关闭 WebSocket 连接。

需要注意的是,在使用 WebSocket 时,需要考虑跨域问题。如果 WebSocket 连接的 URL 和当前页面的 URL 不同,那么需要在服务器端进行相应的跨域设置。同时,需要注意在发送和接收消息时的数据格式,通常需要将数据转换为 JSON 字符串进行传输。

2.2 this.message 怎么组装

在上面的 Vue 组件中,this.message 是用户输入的消息文本,可以通过绑定 v-model 实现双向绑定。

当用户输入消息后,可以将消息文本直接发送到服务器。在发送消息之前,可以根据需要对消息进行组装,例如添加消息的发送者、时间等信息,以便在服务器端进行更好的处理。

以下是一个示例,假设要发送的消息格式为一个包含文本和时间戳的 JSON 对象:

<template>

<div>

<input v-model="message.text" @keyup.enter="sendMessage">code>

<button @click="sendMessage">Send</button>code>

<ul>

<li v-for="msg in messages">{ { msg.text }} ({ { msg.timestamp }})</li>code>

</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 函数中,可以在其他组件中直接调用该函数来发送 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-04 12:00:00

抽奖方式:

在新星计划【云原生之k8s入门】方向参加的小伙伴中随机抽取

参与方式:

参加新星计划【云原生之k8s入门】,并提交任务。活动参与链接:https://bbs.csdn.net/topics/616338210

参与方式:关注博主、点赞、收藏,参与活动

中奖名单 

🍓🍓 获奖名单🍓🍓

 中奖名单:请关注博主动态

名单公布时间:2023-07-04 下午

4 投票

 



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。