VUE3.0实现websocket

最新推荐文章于 2024-03-28 15:07:33 发布
VIP文章 最新推荐文章于 2024-03-28 15:07:33 发布
阅读量1.8k 收藏 5
点赞数 1
分类专栏： 前端 html 文章标签： chrome javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67391907/article/details/123219528
版权

VUE3.0实现websocket

1、 vue2.0与vue3.0的区别

先说一下网上很多资料的websocket都是针对vue2.0的，我这个vue入门小菜鸟，对于vue的整体实现过程理解还是有偏差，因而记录下2.0到3.0的变化。其参考了该博主的文章链接: 让你30分钟快速掌握vue 3。

其主要是对vue3.0新增了setup函数，取消了data变量的赋值。感兴趣的可以自行阅读。这里只做记录。

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
de
最低0.47元/天 解锁文章
m0_67391907
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
spring boot+vue+websocket带token身份认证推送消息实现
06-25
vue前端后端分离spring boot 2.0集成websocket，带身份认证实现消息推送功能
把酒言欢话聊天，基于Vue3.0+Tornado6.1+Redis发布订阅模式打造实时通信聊天系统.zip
01-03
把酒言欢话聊天，基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造实时(websocket)通信聊天系统，非阻塞(aioredis)
vue3 封装WebSocket（直接复制）
wsdshdhdhd的博客
02-03 1072
接受和发送消息 直接调用封装的函数即可
vue3+WebRTC拉流（正确姿势）
yasuo56的博客
06-02 2773
vue3+WebRTC拉流（正确姿势）
Websocket vue 3 全局连接 （一）
最新发布
GoodLuck_yyh的博客
03-28 539
Websocket vue 3 全局连接
vue中使用websocket
01-07
发送消息 export default { data() { return { websocket: null, path: 'ws://192.168.2.27:8082//websocket?type=order' } }, created() { this.init() }, methods: { // websocket初始化 init() { if (typeof (WebSocket) === 'undefined') { this.$message({
vue3中websocket用法
YUSIR 完美CODING世界
09-12 1万+
1.0 认识 websocket #1.0.1 什么是 websocket 和 http 协议类似，websocket 也是是一个网络通信协议，是用来满足前后端数据通信的。 #1.0.2 websocket 相比于 HTTP 的优势 HTTP 协议：客户端与服务器建立通信连接之后，服务器端只能被动地响应客户端的请求，无法主动给客户端发送消息。 websocket 协议：客户端与服务器建立通信连接之后，服务器端可以主动给客户端推送消息了！！！ #1.0.3 websocket 主要的应用场景 需
vue3中使用websocket
陆仁丶的博客
12-05 7834
vue3中使用websocket
使用vue3简单实现WebSocket通信
weixin_44096999的博客
06-14 1万+
WebSocket是一种在客户端和服务器之间进行双向通信的网络协议,使用vue3+ts实现websocket的实时通信
前端之vue3使用WebSocket
热门推荐
weixin_46372074的博客
06-07 1万+
WebSocket 是全双工网络通信通信协议，实现了客户端和服务器的平等对话，任何一方都可以主动发送数据。并且在第一次建立后，就一直保持连接。 更多方法 使用构造函数,新建ws实例 连接成功后的回调函数 用于指定收到服务器数据后的回调函数。 服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象） 指定连接关闭后的回调函数。用法同open......
vue-socket.io跨域问题有效解决方法
10-15
在本篇文章里小编给大家整理的是关于vue-socket.io跨域问题有效解决方法，对此有兴趣的朋友们可以参考下。
SpringBoot+Vue实现的在线聊天系统 附带详细运行指导视频
08-12
应用技术：SpringBoot + VueCli + Vue3.0 + MySQL + MyBatis + Redis + ElementUI-Plus + TypeScript + WebSocket 运行环境：IntelliJ IDEA2019.3.5 + MySQL5.7（项目压缩包中自带) + Redis5.0.5（项目压缩包中自带...
vue3-highcharts:Highcharts.js的Vue 3组件包装器
05-10
Vue 3-Highcharts JS 一个简单，快速的Vue 3组件，用于呈现使用composition API编写的Highcharts.js图表​​。 演示 最低要求 Vue@3.0.0 [email protected]（较旧的版本可能有效，但未经测试） Vue和Highcharts未...
Vue3和SpringBoot集成SocketIO（WebSocket）
weixin_43292559的博客
08-24 1194
由于公司业务需要，需要使用WebSocket发送消息提示，但一开始的技术选型是使用SocketIO，但由于SocketIO独占一个端口，所以就放弃了，但是换原生WebSocket之前已经把SocketIO全部测试ok了，所以今天就把SocketIO和WebSocket一起过一遍。使用的过程也都参考其他文章，这里主要记录一下自己的使用思路以及方法。下面开始我们今天的学习吧！这些我也是看着其他帖子实现的，大体思路差不多，细节不太一样，实现还是没问题的。
vue3.0+websocket 实现聊天室功能
zy991315的博客
08-17 1110
vue3.0+ts+websocket 移动端实现群聊
VUE3 播放RTSP实时、回放(NVR录像机)视频流（使用WebRTC）
weixin_45540431的博客
03-12 2801
播放RTSP视频流；实时摄像机及回放NVR录像机
Vue3+WebRtcServer播放海康监控rtsp流视频
weixin_44089126的博客
08-28 1005
vue播放rtsp流监控
Vue3.0 websocket
09-03
Vue 3.0 支持使用 WebSocket 进行实时通信。你可以使用 Vue 3.0 的生命周期钩子函数和 Vue Composition API 来处理 WebSocket 连接。 首先，你需要创建一个 WebSocket 实例。可以在组件的 `created` 生命周期钩子函数中创建 WebSocket 连接。例如： ```javascript created() { this.socket = new WebSocket('ws://your-websocket-url'); } ``` 然后，你可以在组件中监听 WebSocket 的事件，比如 `onopen`、`onmessage`、`onclose` 和 `onerror`。可以使用 Vue Composition API 的 `onMounted` 来监听 WebSocket 的事件。例如： ```javascript import { onMounted } from 'vue'; export default { created() { this.socket = new WebSocket('ws://your-websocket-url'); }, setup() { onMounted(() => { this.socket.onopen = () => { // WebSocket 连接已经建立 }; this.socket.onmessage = (event) => { // 收到 WebSocket 服务器发送的消息 }; this.socket.onclose = () => { // WebSocket 连接已关闭 }; this.socket.onerror = () => { // 发生错误 }; }); }, }; ``` 当组件销毁时，记得关闭 WebSocket 连接，可以在 `beforeUnmount` 生命周期钩子函数中进行。例如： ```javascript import { beforeUnmount } from 'vue'; export default { created() { this.socket = new WebSocket('ws://your-websocket-url'); }, setup() { onMounted(() => { // 监听 WebSocket 事件 }); beforeUnmount(() => { this.socket.close(); }); }, }; ``` 以上是在 Vue 3.0 中使用 WebSocket 的基本流程。你可以根据实际需求，进一步处理收到的消息、发送消息等操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值