这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战
背景介绍
websocket: 很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
项目需求:
之前的项目用的是原始的webSocket实现后台消息的主动推送,详细实现可查看www.runoob.com/html/html5-…
但是本次需求是所有已连接的用户需要接受到的消息是不一样的,只需要接受自己部门相关的案件消息。后端要求前端来实现根据不同的用户订阅发送不同的订阅请求。
使用方法
1、安装
npm install sockjs-client@ 1.5.1
npm install stompjs@2.3.3
项目使用的版本是"sockjs-client": "^1.5.1","stompjs": "^2.3.3"
2、引入模块
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
3、业务相关代码
//websocket的url地址http://10..../../webSocket
this.sockjsUrl=
process.env.NODE_ENV === 'development'
? '/api/avc-web/webSocket'
: `${protocol}//${host}/${process.env.VUE_APP_CONTEXT}/webSocket`
async connection() {
const {
data: { deptIndexCode }
} = await getCurUser(); //从接口获取部门参数
var _this = this;
// 建立连接对象
let socket = new SockJS(this.sockjsUrl);
// 获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(socket);
// 定义客户端的认证信息,按需求配置
let headers = {
Authorization: ''
};
// 向服务器发起websocket连接
this.stompClient.connect(
headers,
function(res) {
_this.stompClient.subscribe(`/topic/${deptIndexCode}`, function(msg) {
// _this.arrys.unshift(JSON.parse(msg.body));
console.log(JSON.parse(msg.body));
const newObj = JSON.parse(msg.body);
});
},
function(error) {
// 连接发生错误时的处理函数
console.log('失败');
console.log(error);
}
);
},