vue使用socktJs

在vue中使用SockJS实现webSocket通信
原文

1、简单介绍
基于webSocket通信的库主要有 socket.io，SockJS，这次用的是 SockJS。

2、前提

这里我们使用sockjs-client、stomjs这两个模块，要实现webSocket通信，需要后台配合，也使用相应的模块。

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之上提供了一个基于帧的线路格式层,用来定义消息语义.

3、代码

先安装 sockjs-client 和 stompjs

npm install sockjs-client
npm install stompjs

这里必须要安装websocket ------ npm i websocket

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
export default {data(){return {stompClient:'',timer:'',}},methods:{initWebSocket() {this.connection();let that= this;// 断开重连机制,尝试发送消息,捕获异常发生时重连this.timer = setInterval(() => {try {that.stompClient.send("test");} catch (err) {console.log("断线了: " + err);that.connection();}}, 5000);},  connection() {// 建立连接对象let socket = new SockJS('http://10.10.91.4:8081/ws');// 获取STOMP子协议的客户端对象this.stompClient = Stomp.over(socket);// 定义客户端的认证信息,按需求配置let headers = {Authorization:''}// 向服务器发起websocket连接this.stompClient.connect(headers,() => {this.stompClient.subscribe('/topic/public', (msg) => { // 订阅服务端提供的某个topicconsole.log('广播成功')console.log(msg);  // msg.body存放的是服务端发送给我们的信息},headers);this.stompClient.send("/app/chat.addUser",headers,JSON.stringify({sender: '',chatType: 'JOIN'}),)   //用户加入接口}, (err) => {// 连接发生错误时的处理函数console.log('失败')console.log(err);});},    //连接 后台disconnect() {if (this.stompClient) {this.stompClient.disconnect();}},  // 断开连接},mounted(){this.initWebSocket();},beforeDestroy: function () {// 页面离开时断开连接,清除定时器this.disconnect();clearInterval(this.timer);}
}

参考文章

https://juejin.im/post/5b7fd02d6fb9a01a196f6276

vue使用socktJs相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
Vue 自定义权限指令
前述虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现这里由于我的项目做了动态权限,页面的按钮也需要根据 ...
vue响应式给数组中的对象添加新属性
需要使用到vue的全局api $set(item,'newParam','value')方法 group: [ // 对象数组{ id: '1', name: '任务1' ,disable: fals ...

vue使用socktJs

vue使用socktJs相关推荐

最新文章

热门文章