用websocket建立远程连接（vue）-CSDN博客

一。用引入js方式

1 在main.js中引入

//引入websocket

import '@/assets/js/sockjs.min.js';

import '@/assets/js/stomp.min.js';

2 在代码里书写

//与服务器建立==>监听是否被扫

scanConnect(){

this.refreshConnect();

var socket = new SockJS('http://118.178.118.114/zjzwfw-zwmp-api/endpoint-websocket');

this.stompClient = Stomp.over(socket);

var _self=this;

_self.stompClient.connect({'token':sessionStorage.getItem('token')}, function (frame) {

console.log(11, _self.stompClient);

});

//取消与服务器端的链接

disconnect(){

if (this.stompClient != null) {

this.stompClient.disconnect();

console.log("Disconnected",this.stompClient);

}

二。用npm构建

// 安装命令行: npm install sockjs-client 和npm install @stomp/stompjs

 
     // 安装并引入相关模块 
    
     import SockJS from  
     'sockjs-client' 
     ;  
    
     import Stomp from  
     'stompjs' 
     ; 
    
     export  
     default 
     { 
    
     data() { 
    
     return 
     { 
    
     dataList: [] 
    
     }; 
    
     }, 
    
     mounted: 
     function 
     (){ 
    
     this 
     .initWebSocket(); 
    
     }, 
    
     beforeDestroy:  
     function 
     () { 
    
     // 页面离开时断开连接,清除定时器 
    
     this 
     .disconnect(); 
    
     clearInterval( 
     this 
     .timer); 
    
     }, 
    
     methods: { 
    
     initWebSocket() { 
    
     this 
     .connection(); 
    
     let self =  
     this 
     ; 
    
     // 断开重连机制,尝试发送消息,捕获异常发生时重连 
    
     this 
     .timer = setInterval(() => { 
    
     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" 
     ); 
    
     } 
    
     } 
    
     } 
    
     };