1.介绍
websocket
建立连接（创建WebSocket对象）：
var Socket =new WebSocket(url, [protocol] );// url：服务器端地址；protocol：可选，指定可接受的子协议。
WebSocket对象提供了两个属性、四个事件、两个方法，分别是：
1.WebSocket.readyState属性：表示连接状态
0——（连接尚未建立）；1——（连接已建立）；2——（连接正在关闭）；3——（连接已经关闭或连接不能打开）
2.WebSocket.bufferedAmount属性：被send()放入传输队列，还未发出的UTF-8文本字节数
ws.addEventListener('open',function(event){
ws.send('Hello Server!');
});
ws.onopen =function(){
ws.send('Hello Server!');
}
3.open：WebSocket.onopen()：连接建立时触发的事件
4.message：WebSocket.onmessage()： 客户端接收服务器端发送的信息时触发
5.error：WebSocket.onerror()：通信发生错误时触发
6.close：WebSocket.onclose()：连接关闭时触发
7.WebSocket.send()：发送信息的方法
8.WebSocket.close()：关闭连接方法
SOCKJS
SOCKJS 是一个浏览器使用的js库，它提供了一个类似网络的对象，和连贯的，跨浏览器的jaApi，可以在浏览器和服务器之间创建一个低延迟，全双工的跨域通信通道
SOCKJS实现了对浏览器的兼容，spring框架提供了很多透明的，回退选项，如果遇到低版本的浏览器会自动降级为轮询，支持就用websocket
sockjs-client
sockjs-client 是从SOCKJS分离出来的客户端使用的通信模块
stompjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议;
websocket只是一个消息架构，不强制使用任何的消息协议，为了更好的在浏览器和服务器之间传递消息，使用stomp协议 的stompjs
STOMP与WebSocket 的关系:就是没使用http而使用stomp协议，在浏览器和服务器之间进行消息传递
1.HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;
2.直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
3同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义、
2.使用
安装
npm install sockjs-client --save
npm install stompjs --save
引入
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('execution-progress/info?t=1593744273983');
var sockjs =new SockJS(url, _reserved, options);
//server(string)：添加到url的字符串，默认为随机的4位数
//transports (string OR array of strings)：回退传输列表
// sessionId (number OR function)：会话标识，函数必须返回一个随机生成的字符串
// 获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(socket);
// 定义客户端的认证信息,按需求配置
let headers = {
Authorization:''
}
// 向服务器发起websocket连接
this.stompClient.connect(headers,() => {
this.stompClient.subscribe('/topic/public', (msg) => { // 订阅服务端提供的某个topic
console.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);
}
}