1.介紹
websocket
建立連接（創(chuàng)建WebSocket對象）：
var Socket =new WebSocket(url, [protocol] );// url：服務器端地址萨咕；protocol：可選，指定可接受的子協(xié)議峻凫。
WebSocket對象提供了兩個屬性炕柔、四個事件州叠、兩個方法屎债，分別是：
1.WebSocket.readyState屬性：表示連接狀態(tài)
????0——（連接尚未建立）；1——（連接已建立）擅威；2——（連接正在關閉）；3——（連接已經關閉或連接不能打開）
2.WebSocket.bufferedAmount屬性：被send()放入傳輸隊列冈钦，還未發(fā)出的UTF-8文本字節(jié)數(shù)
????ws.addEventListener('open',function(event){
????????????ws.send('Hello Server!');
????});
? ? ?ws.onopen =function(){
????????ws.send('Hello Server!');
????}
3.open：WebSocket.onopen()：連接建立時觸發(fā)的事件
4.message：WebSocket.onmessage()： 客戶端接收服務器端發(fā)送的信息時觸發(fā)
5.error：WebSocket.onerror()：通信發(fā)生錯誤時觸發(fā)
6.close：WebSocket.onclose()：連接關閉時觸發(fā)
7.WebSocket.send()：發(fā)送信息的方法
8.WebSocket.close()：關閉連接方法
SOCKJS
SOCKJS 是一個瀏覽器使用的js庫郊丛，它提供了一個類似網絡的對象，和連貫的，跨瀏覽器的jaApi厉熟，可以在瀏覽器和服務器之間創(chuàng)建一個低延遲导盅，全雙工的跨域通信通道
SOCKJS實現(xiàn)了對瀏覽器的兼容，spring框架提供了很多透明的揍瑟，回退選項白翻，如果遇到低版本的瀏覽器會自動降級為輪詢，支持就用websocket
sockjs-client
sockjs-client 是從SOCKJS分離出來的客戶端使用的通信模塊
stompjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡單文本協(xié)議;
websocket只是一個消息架構绢片，不強制使用任何的消息協(xié)議滤馍，為了更好的在瀏覽器和服務器之間傳遞消息，使用stomp協(xié)議 的stompjs
STOMP與WebSocket 的關系:就是沒使用http而使用stomp協(xié)議杉畜，在瀏覽器和服務器之間進行消息傳遞
1.HTTP協(xié)議解決了web瀏覽器發(fā)起請求以及web服務器響應請求的細節(jié),假設HTTP協(xié)議不存在,只能使用TCP套接字來編寫web應用,你可能認為這是一件瘋狂的事情;
2.直接使用WebSocket(SockJS)就很類似于使用TCP套接字來編寫web應用,因為沒有高層協(xié)議,就需要我們定義應用間發(fā)送消息的語義,還需要確保連接的兩端都能遵循這些語義;
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;
? ? ? ? ? ? // 斷開重連機制,嘗試發(fā)送消息,捕獲異常發(fā)生時重連
? ? ? ? ? ? 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位數(shù)
? ? ? ? ? ? ? ? //transports (string OR array of strings)：回退傳輸列表
? ? ? ? ? ? ? ? // sessionId (number OR function)：會話標識此叠，函數(shù)必須返回一個隨機生成的字符串
? ? ? ? ? ? // 獲取STOMP子協(xié)議的客戶端對象
? ? ? ? ? ? this.stompClient = Stomp.over(socket);
? ? ? ? ? ? // 定義客戶端的認證信息,按需求配置
? ? ? ? ? ? let headers = {
? ? ? ? ? ? ? ? Authorization:''
? ? ? ? ? ? }
? ? ? ? ? ? // 向服務器發(fā)起websocket連接
? ? ? ? ? ? this.stompClient.connect(headers,() => {
? ? ? ? ? ? ? ? this.stompClient.subscribe('/topic/public', (msg) => { // 訂閱服務端提供的某個topic
? ? ? ? ? ? ? ? ? ? console.log('廣播成功')
? ? ? ? ? ? ? ? ? ? console.log(msg);? // msg.body存放的是服務端發(fā)送給我們的信息
? ? ? ? ? ? ? ? },headers);
? ? ? ? ? ? ? ? this.stompClient.send("/app/chat.addUser",
? ? ? ? ? ? ? ? ? ? headers,
? ? ? ? ? ? ? ? ? ? JSON.stringify({sender: '',chatType: 'JOIN'}),
? ? ? ? ? ? ? ? )? //用戶加入接口
? ? ? ? ? ? }, (err) => {
? ? ? ? ? ? ? ? // 連接發(fā)生錯誤時的處理函數(shù)
? ? ? ? ? ? ? ? console.log('失敗')
? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? });
? ? ? ? },? ? //連接 后臺
? ? ? ? disconnect() {
? ? ? ? ? ? if (this.stompClient) {
? ? ? ? ? ? ? ? this.stompClient.disconnect();
? ? ? ? ? ? }
? ? ? ? },? // 斷開連接
? ? },
? ? mounted(){
? ? ? ? this.initWebSocket();
? ? },
? ? beforeDestroy: function () {
? ? ? ? // 頁面離開時斷開連接,清除定時器
? ? ? ? this.disconnect();
? ? ? ? clearInterval(this.timer);
? ? }
}
