Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[vuejs] 在vuejs中使用websocket进行实时通讯

[vuejs] 在vuejs中使用websocket进行实时通讯

作者头像
唯一Chat
发布于 2020-06-10 07:08:50
发布于 2020-06-10 07:08:50
1.7K00
代码可运行
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地
运行总次数:0
代码可运行

在vuejs框架中使用websocket , 可以比较方便的运用到vuejs框架的响应式系统 , 以及一些简单的生命周期函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    var app=new Vue({
        el: '#app',
        data: {
            server:"ws://127.0.0.1:8080/chat_server",
            socket:null,
        },
        methods: {
  

            //初始化websocket
            initConn() {
                let socket = new ReconnectingWebSocket(this.server);//创建Socket实例
                this.socket = socket
                this.socket.onmessage = this.OnMessage;
                this.socket.onopen = this.OnOpen;
            },
            OnOpen() {
                let mes = {}
                mes.type = "test";
                this.socket.send(JSON.stringify(mes));
            },
            OnMessage(e) {
                const redata = JSON.parse(e.data);
                console.log(redata)
            },

  
        },
        created: function () {
            this.initConn();
        }
    })                

其他的websocket回调函数可以在initConn中进行赋值给method中的方法

另外websocket是使用的这个类库reconnecting-websocket , 可以进行自动的断线重连

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
在 Vue 中使用 ReconnectingWebSocket实现即时通讯聊天客服功能
ReconnectingWebSocket 是一个自动重连的 WebSocket 实现,非常适合在 Vue 项目中使用。下面是如何在 Vue 中集成和使用它的方法:
唯一Chat
2025/08/09
980
JavaScript数据交互:现代Web应用的核心引擎
在Web应用开发中,数据交互如同生命线般贯穿始终。从早期的XMLHttpRequest到现代Fetch API,从RESTful架构到GraphQL革命,JavaScript的数据交互技术经历了翻天覆地的变化。本文将深入探讨这些核心技术,并提供可直接用于生产环境的代码实践。
熊猫钓鱼
2025/08/01
1170
JavaScript数据交互:现代Web应用的核心引擎
玩转 JS 逆向:RPC 加持,爬虫效率飙升
一些复杂的网站针对参数是层层加密,如果选择硬刚,去扣代码、补环境,耗时耗力的同时,不一定能获取完整的加密逻辑
AirPython
2023/08/22
1.2K0
玩转 JS 逆向:RPC 加持,爬虫效率飙升
[javascript] js websocket断线重连库ReconnectingWebSocket
自己写断线重连比较麻烦 , 可以使用这个js库 ReconnectingWebSocket.js
唯一Chat
2021/05/18
4.1K0
[javascript] js websocket断线重连库ReconnectingWebSocket
websocket断线重连的方法
我们在是有websocekt的时候,有的时候由于某些原先websocket会断开连接,我们需要重现连接,该如何实现呢?这就需要我们仔细研究websocket的api的使用了。
挥刀北上
2021/02/05
20.2K0
从零玩转Websocket实时通讯服务之前后端分离版本
前言 公司项目需要用到消息提示,那么WebSocket它来了经过我面向百度的学习,废话不多说直接开干. 后端搭建 一、依赖导入 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 二、搭建websocket服务 1.WebSocke
杨不易呀
2022/01/19
1.2K0
Swoole跟thinkphp5结合开发WebSocket在线聊天通讯系统教程
这里的路径,是因为我绑定了home模块为默认模块,tp5默认情况是:php public/index.php index/Websocket/start)
猿哥
2019/03/29
2K0
Swoole跟thinkphp5结合开发WebSocket在线聊天通讯系统教程
【黄啊码】thinkphp6结合workerman、websocket案例
安装workerman教程看这里——》https://markwcm.blog.csdn.net/article/details/119084920
黄啊码
2021/09/26
1.1K0
在Vue项目中使用WebSocket技术
MDN上面有详细的文档,这里就不过多介绍,我们直接在vue项目上使用WebSocket,其实可以借助库实现,但是这个项目我们使用原生的,毕竟代码不多,也没必要在安装个依赖。
青年码农
2021/11/18
3.5K0
在Vue项目中使用WebSocket技术
Nodejs + WebSocket + Vue 实现多人聊天室WebIM功能 – 第二章
在《Nodejs + WebSocket简单介绍及示例 - 第一章》中简单的介绍了,Nodejs + WebSocket的使用方法及作用,今天就用它来搭建一个简单的聊天室功能。
Javanx
2019/09/04
2.4K0
Nodejs + WebSocket + Vue 实现多人聊天室WebIM功能 – 第二章
SpringBoot2.0集成WebSocket,实现后台向前端推送信息
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
全栈程序员站长
2022/08/18
1.4K0
SpringBoot2.0集成WebSocket,实现后台向前端推送信息
前端实时消息提示的效果-websocket长轮询
WebSocket是html5新增加的特性之一,可以实现客户端和服务器彼此之间相互通信,也可以实现跨域通信,目前大部分主流浏览器都支持,iE浏览器需要10版本以上。
王小婷
2025/05/18
1450
前端实时消息提示的效果-websocket长轮询
使用websocket-sharp来创建c#版本的websocket服务
当前有一个需求,需要网页端调用扫描仪,javascript不具备调用能力,因此需要在机器上提供一个ws服务给前端网页调用扫描仪。而扫描仪有一个c#版本的API,因此需要寻找一个c#的websocket库。 java里有大名鼎鼎的netty,通过搜索,c#可以选择websocket-sharp来实现websocket Server。 使用websocket-sharp创建websocket server using System; using WebSocketSharp; using WebSocketSh
JadePeng
2018/03/12
3.9K0
PHP进阶之利用Swoole实现一个简单的WebSocket多人聊天室
其实这个聊天室的DEMO我早都发到Github上了,之前学习Swoole的时候就已经练过手了
沈唁
2018/09/18
3.6K0
PHP进阶之利用Swoole实现一个简单的WebSocket多人聊天室
sekiro框架部署以及简单的js-hook
https://files.cnblogs.com/files/pythonywy/sekiro-release-demo-20210823.zip
小小咸鱼YwY
2021/12/04
1.4K0
springboot+websocket+layui制作的实时聊天室,后端开发入门样例
复习感觉无聊的时候就想拿以前学习的东西做几个小案例,这段时间在搭一个博客网站,正好做到私信这个模块,突然想试试看看可不可以做成一个实时通信的私信功能,思路一来就一发不可收拾,开整开征。
小王不头秃
2024/06/19
4790
springboot+websocket+layui制作的实时聊天室,后端开发入门样例
WebSocket in ASP.NET Core
  WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)
yoyofx
2018/09/05
1.1K0
WebSocket in ASP.NET Core
使用node.js如何简单快速的搭建一个websocket聊天应用
初始化项目 npm init 安装nodejs-websocket npm install nodejs-websocket 创建并编辑启动文件 创建一个名为app.js文件,并且编辑它。 var ws = require("nodejs-websocket"); console.log("开始建立连接...") var [user1,user2,user1Ready,user2Ready] = [null,null,false,false]; ws.createServer(function(
Vam的金豆之路
2021/12/01
7110
使用node.js如何简单快速的搭建一个websocket聊天应用
GOFLY在线客服-使用reconnect-websocket.js实现断线自动重连机制-GO语言实现开源独立部署客服系统
现在GOFLY在线客服使用reconnect-websocket.js就可以非常简单轻松的实现断线重连
唯一Chat
2021/10/26
8220
Vue中websocket的使用方法
初始化WebSocket以及其他可能用到的方法 //初始化WebSocket initWs() { if(typeOf(WebSocket) === "undefined") { //浏览器不支持WebSocket return false } else { this.socket = new WebSocket() //括号中填写后端提供的路径 this.socket.onopen = this.open this.socket.onerror = th
peng_tianyu
2022/12/15
6610
推荐阅读
相关推荐
在 Vue 中使用 ReconnectingWebSocket实现即时通讯聊天客服功能
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档