vue跨域使用websocket_在vue中使用SockJS实现webSocket通信的过程
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程:
socksjs
•客户端和服务器端api尽可能简洁,尽量靠近websocket api
•支持服务端扩展和负载均衡技术
•传输层应该全面支持跨域通信
•如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式
•尽可能快地建立连接
•客户端只是纯粹的JavaScript,不需要flash
•客户端JavaScript必须经过严格的测试
•服务器端代码尽可能简单,降低用另一种语言重写server的代价
前提
要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块 sockjs-client 模块和 stomjs 模块,接下来我会先对这两个模块做一个简单的介绍.
关于实时通信
实现实时通信,我们通常有三种方法:
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 的关系:
HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;
直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义.
代码实现
代码中除了最基本的连接,还设置了一个定时器,每隔十秒发送一条数据到服务器端,如果发生错误,catch这个错误,重新建立连接.
{
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) => { // 订阅服务端提供的某个topic
consolel.log(msg.body); // msg.body存放的是服务端发送给我们的信息
});
},(err) => {
});
},disconnect() {
if (this.stompClient != null) {
this.stompClient.disconnect();
console.log("Disconnected");
}
}
}
};
总结
以上所述是小编给大家介绍的在vue中使用SockJS实现webSocket通信的过程。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
vue跨域使用websocket_在vue中使用SockJS实现webSocket通信的过程相关推荐
- php vue 跨域请求数据6,Vue跨域请求问题解决方案过程解析
查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: ...
- 在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助 ...
- c语言实现stomp协议客户端,在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和 服务器 端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些 ...
- form表单会跨域_我的Vue不小心跨域了o()o 干它
点击上方"Python进击者",选择"星标"公众号 超级无敌干货第一时间推给你!!! 好久不见,今天想写的是前段时间碰到的一个小问题.其实故事背景是前端的同学跟 ...
- vue 什么是渐进式 响应式 意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是 轻量的 模型视图视图模型 框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
- Vue 跨域问题解决
Vue 跨域问题解决 vue框架目录: ProxyTable pathRewrite:是使用proxy进行代理时,对请求路径进行重定向以匹配到正确的请求地址,其中^是正则中限定开头,则是/api为开头 ...
- CORS了解与VUE跨域解决
1.CORS了解 CORS通信得关键地方就是服务器,只要服务器实现了CORS接口,就可以实现跨域通信 浏览器将CORS请求分为两大类:简单请求.非简单请求 简单请求 基本介绍 同时满足以下条件就是简单 ...
- vue跨域和拦截器的配置
最近项目中需要使用vue框架.虽然vue在前端开发人员里也不算是什么新鲜的事儿了.只要是搞前端的都会一些vue的操作.我也不多说,直接进入正题.(这儿我以vue2.x为例) 安装什么的,我就不在这儿说 ...
- vue跨域实现与原理(proxyTable)
vue本地跨域实现与原理 1.实现 1.1.使用proxyTable代理 1.2.注意事项 2.proxyTable原理 1.实现 使用vue搭建的项目在本地与后端联调时,因为是使用node运行服务器 ...
- Vue跨域配置proxyTable问题
最近在做一个前后端分离的毕设,在前端向后端发送get请求时遇到了Vue跨域的问题. been blocked by CORS policy: No 'Access-Control-Allow-Orig ...
最新文章
- FhqTreap的区间翻转
- 六种GAN评估指标的综合评估实验,迈向定量评估GAN的重要一步
- 浅谈Spark应用程序的性能调优
- 微软发布8月安全公告 包含13个补丁修补22个漏洞
- 十年后,每天 24 小时离不开传感技术
- 【ERNIE】深度剖析知识增强语义表示模型——ERNIE
- 帆软帮助文档_帆软:像阿甘一样,奔跑在商业智能的赛道上
- android 小游戏心得、,滴答滴答:双人故事
- android获取路由器ip地址吗,查看路由器IP地址方法(管理后台地址)
- python快速入门豆瓣_python爬虫实践——零基础快速入门(二)爬取豆瓣电影
- .NET 函数调用反转
- vivo一面翻车,整理完这份Java面经分类汇总,我突然悟了
- html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素...
- nginx locating匹配问题(1) ---cookie
- 百鸡百钱问题-从枚举到数学
- 数字逻辑与EDA技术课程设计---闹钟
- 【笔试题目整理】京东2018秋招数据分析工程师笔试题
- python实现猜数字游戏_python如何实现猜数字游戏
- CAN总线数据分析 汽车CAN总线
- git本地分支推送到远程分支
热门文章
- hive中的集合操作函数
- hive 窗口函数 应用场景与实战详解
- Hbase rowkey 设计原则
- 达尔豪斯大学计算机科学世界排名,最新达尔豪斯大学世界排名抢先看 QS世界大学排名TOP300...
- java项目开发团队协作重要性_Java 项目开发团队有必要统一 IDE 吗?
- 房子怎么拆除_新规,可能拆除农村这4类房子,每户家庭可能获得40万
- git 关于Git每次进入都需要输入用户名和密码的问题解决
- yii2 init初始化脚本分析
- 北京游戏开发学习路线:花多少钱才能成为游戏开发?
- 社会资源全整合 视频监控全覆盖