首页 编程相关 正文
我要发布

前端如何使用websocket发送消息

编程相关
2025-12-13 0 592

序言

今天来学习一下前端如何使用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 发送和接收消息：

<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方法中，将用户输入的消息发送到服务器。
  • 在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\”>
<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函数中，可以在其他组件中直接调用该函数来发送 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，表示请求成功，可以在控制台打印返回的数据；否则，表示请求失败，可以在控制台打印错误信息。

刘新宇

亚马逊中国研发中心研发经理，负责分布式仓储物流系统的开发。

1999年和2002年在清华大学自动化系分别获得学士和硕士学位。长期专注于函数式基础算法，著有《算法新解》一书（2017年出版）。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 编程相关 前端如何使用websocket发送消息 https://www.zuozi.net/36350.html

上不了网，报错："DNS服务器可能不可用"的解决办法
上一篇： 上不了网，报错："DNS服务器可能不可用"的解决办法
CSS将页面元素隐藏的10种方法小结
下一篇： CSS将页面元素隐藏的10种方法小结
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的