在vue中使用SockJS实现webSocket通信

最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程:

前提

要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块sockjs-client模块和stomjs模块,接下来我会先对这两个模块做一个简单的介绍.

稍后我会写一篇使用NodeJS SockJS实现视屏弹幕的功能的文章,敬请期待~

关于实时通信

实现实时通信,我们通常有三种方法:

  • ajax轮询 ajax轮询的原理非常简单,让浏览器每隔几秒就像服务器发送一个请求,询问服务器是否有新的信息.
  • http 长轮询 长轮询的机制和ajax轮询差不多,都是采用轮询的方式,不过才去的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起链接后,如果没有消息,就一直不返回response给客户端.知道有新的消息才返回,返回完之后,客户端再此建立连接,周而复始.
  • WebSocket WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议.在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,不需要繁琐的询问和等待. 从上面的介绍很容易看出来,ajax轮询和长轮询都是非常耗费资源的,ajax轮询需要服务器有很快的处理速度和资源,http长轮询需要有很高的并发,也就是同时接待客户的能力.而WebSocket,只需要经过一次HTTP请求,就可以与服务端进行源源不断的消息收发了.

sockjs-client

sockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟,全双工,跨域通信通道. 你可能会问,我为什么不直接用原生的WebSocket而要使用SockJS呢?这得益于SockJS的一大特性,一些浏览器中缺少对WebSocket的支持,因此,回退选项是必要的,而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性,优先使用原生的WebSocket,如果某个浏览器不支持WebSocket,SockJS会自动降级为轮询.

stomjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议; WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义. 与HTTP不同,WebSocket是处在TCP上非常薄的一层,会将字节流转化为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此,可以在 WebSocket 之上使用STOMP协议,来为浏览器 和 server间的 通信增加适当的消息语义。

STOMP与WebSocket 的关系:

  1. HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;
  2. 直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
  3. 同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义.

代码实现

代码中除了最基本的连接,还设置了一个定时器,每隔十秒发送一条数据到服务器端,如果发生错误,catch这个错误,重新建立连接.

// 安装并引入相关模块
import SockJS from  'sockjs-client';  
import  Stomp from 'stompjs';
export default {data() {return {dataList: []};},mounted:function(){this.initWebSocket();},beforeDestroy: function () {// 页面离开时断开连接,清除定时器this.disconnect();clearInterval(this.timer);},methods: {initWebSocket() {this.connection();let self = this;// 断开重连机制,尝试发送消息,捕获异常发生时重连this.timer = setInterval(() => {try {self.stompClient.send("test");} catch (err) {console.log("断线了: "   err);self.connection();}}, 5000);},removeTab(targetName) {console.log(targetName)},connection() {// 建立连接对象this.socket = new SockJS('http://xxxxxx:8089/ws');//连接服务端提供的通信接口,连接以后才可以订阅广播消息和个人消息// 获取STOMP子协议的客户端对象this.stompClient = Stomp.over(this.socket);// 定义客户端的认证信息,按需求配置var headers = {login: 'mylogin',passcode: 'mypasscode',// additional header'client-id': 'my-client-id'};// 向服务器发起websocket连接this.stompClient.connect(headers,(frame) => {this.stompClient.subscribe('/topic/chat_msg', (msg) => { // 订阅服务端提供的某个topicconsolel.log(msg.body);  // msg.body存放的是服务端发送给我们的信息});}, (err) => {// 连接发生错误时的处理函数console.log(err);});},// 断开连接disconnect() {if (this.stompClient != null) {this.stompClient.disconnect();console.log("Disconnected");}}}
};

结语

不知道我是否有写明白,我才疏学浅,表达能力有限,如果有不明白的地方,可发送疑问到我的邮箱2510909248@qq.com,另外如果有什么好的意见或者建议,也欢迎骚扰~~~

参考链接

websocket:支持 前端连接 订阅

SockJS简单介绍

STOMP 客户端 API 整理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DI / CDI –基础

简介(DI / CDI基础) 首先,我认为对此会有一些困惑,但事实是,它们是相同的–不同之处在于用法及其用途。 DI(依赖注入)是通用术语–该功能基本上是在任何应用程序上进行Bean发现和Bean连接过程的…

引导界面图标好大_游戏里那些图标和界面,原来是这么设计出来的?

UI设计最硬核的思维 就是功能微信现在在做一种全面连接的功能,而游戏需要实现的是人机互动的功能。实现并完善功能,是互联网、游戏、网站、渴望UI人才的根本原因。如果说有电脑的世界是一片很大的面,那么可视化的操作,都是UI设计师…

爬格子呀9.17(图论)

刘汝佳的紫书差不多就告一段落吧,我觉得可以了,怎么说呢,这书也陪着自己走了一年多了吧,也目睹了从一个啥也不会的萌新到一个稍微会一点的萌新的转变。 差不多开始下本书吧,自己也大三了,时间真的有点紧啊w…

一个vue加egg.js的博客

之前自己的博客是用hexo做的,后面想做一个有后台的博客就打算用vue加node来试试,于是就有了这个博客。 项目地址 W-Blog W-Blog是一个基于vue和node的小小小博客 前端用vue,后端用egg.js 快速入门 技术栈 前端: 用户端&#…

js判断处理undefined类型的数据

code: resFlag response.result.data.result; /查询客户为白名单用户时,将"*该企业已被列入黑名单"标记清除 if(typeof resFlag "undefined"){$("#companynameisblack").text(""); }转载于:https://www.cnblogs.com/YLQBL/p/8819696…

批处理写入以及动态与参数化SQL,数据库的性能如何?

批处理写入是最有效的数据库优化之一。 批处理写入受大多数现代数据库和JDBC标准的一部分支持,并且受大多数JPA提供程序支持。 普通数据库访问包括在单独的数据库/网络访问中将每个DML(插入,更新,删除)语句发送到数据…

android音量图标不见了,电脑声音图标不见了如何解决?

最近有电脑用户反映,看视频时觉得声音太小了,要调大点声,却发现任务栏上的声音图标不见了,想调个声音都难。那么,电脑声音图标不见了如何解决呢?我们一起往下看看。方法步骤一、XP系统下找回任务栏上的声音图标1、重启…

认识iOS系统架构

关于本文: 文章主要介绍iOS系统架构中的四层结构的内容、常用的框架、大致的功能,然后对iOS开发人员的发展提出自己的一些拙见。 一、iOS系统是基于UNIX系统,所有从系统稳定性上来说的确比其他操作系统的产品要好。 iOS在系统架构上分为4层&a…

r语言赋值为na_r语言将空白格替换成NA

有数据集类似user_id qid1371 000013046dc0ab29ef8773eb61aba623 02 0000cfcadfa43ef824669405081165b13 0006ee1acc5321260ba0fbff1fb8f6494 00083f7b8c6170a3fc976d7b99245259 …

Java泛型教程–示例类,接口,方法,通配符等

泛型是Java编程的核心功能之一,它是Java 5中引入的。如果您使用的是Java Collections ,并且版本5或更高版本,则可以肯定使用了它。 在集合类中使用泛型非常容易,但是它提供了比仅创建集合类型更多的功能,我们将在本文中…

html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签

我的音乐播放器HTML5中增加了Audio和Video标签,这两个标签的用法非常相似。功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况。这里用的依然是Can I Use这个在线网站,相信学习前端的同学应该都不陌生。Can I Use我们可以看到&a…

初识react(四) react中异步解决方案之 redux-saga

回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的html redux.js的demo初识react(三)在 react中使用redux来实现简版计数器初识react(四) react中异步解决方案之 redux-saga初识react(五) 数据流终极解决方案 dva(零配置) 今天demo是实现一个异步的计…

C# WinFrom 关于MDI

dev是一个牛B 到没边的控件 我们正常用winform做个原始mdi窗体 一点都不好看 但 用的dev只需要一个控件 就可让显示舒服多了 建一个项目 上边放一个 xtraTabbedMdiManager1 一个button1 button1.click如下: Form frm new Form(); frm.MdiParent this; frm.Text &…

Jfinal 文件上传

JFinal上传文件 uploadify 可以在http://www.uploadify.com/ 下载。 在原项目的基础上。 uploadify使用&#xff1a; <input id"file_upload_1" name"file_upload" type"file" multiple"true"> /** param uploader 文件上传方法…

轻量级的开源集成:Apache Camel还是Spring集成?

首先&#xff0c;为全面披露信息&#xff0c;在过去的1.5年中&#xff0c; 我一直担任 FuseSource&#xff08;现为Red Hat&#xff09; 的顾问&#xff0c;为零售&#xff0c;运输&#xff0c;银行/金融等不同行业的大型和小型公司提供SOA和集成项目支持。我的专长是使用该领域…

blue html中转换,Vue/Vue中Html和Markdown互相转换/README.md · bluemoon/LearningNotes - Gitee.com...

# Vue中Html和Markdown互相转换## 前言最近想实现的一个功能&#xff0c;就是将系统中的博客进行导出成Markdown格式&#xff0c;后面经过了调研发现有两种方法能够满足需求&#xff0c;一个是Java后台中将HTML转换成Markdown&#xff0c; 然后导出。第二种方式是在客户端将Htm…

WePY:在质疑中前进 | 文末福利

WePY 作者介绍 Q: 先介绍一下自己吧~ Gcaufy: 我 2011 年大学毕业之后&#xff0c;阴错阳差的走上了 Web 开发的道路。15 年之前算是自由职业 SOHO 工作&#xff0c;主要给一些国外的大公司做外包系统&#xff0c;更多的是做后端开发。15 年之后以前端工程师的身份加入腾讯&a…

表单必填标星_怎么用JS做form表单验证,要详细代码,求救!(带星号的是必填项)...

匿名用户1级2014-06-17 回答举个例子吧&#xff1a;<input type”text” id”telephone” ><input type“button” οnclick“functioncheck1”value“检测”>如果要检测它是否符合标准&#xff0c;那我就会在页面中导入js包然后写一个<script> f…

MySQL/MariaDB表表达式(3):视图

视图是表表达式的一种&#xff0c;所以它也是虚拟表。对视图操作的时候会通过语句动态的从表中临时获取数据。 1.创建、修改视图 CREATE [OR REPLACE][ALGORITHM {UNDEFINED | MERGE | TEMPTABLE}]VIEW [IF NOT EXISTS] view_name [(column_list)]AS select_statement[WITH [C…

使用Arquillian(包括JPA,EJB,Bean验证和CDI)测试Java EE 6

很长时间以来&#xff0c;我听到很多人对Arquillian说好话 。 虽然我一直在阅读有关其用法的文章&#xff0c;但实际上我无法在一篇文章中找到涵盖我认为重要的某些方面的文章。 当然&#xff0c;我看起来还不够努力。 我要讲的要点是&#xff1a; 使用JPA。 我只是在这里使用…