websocket(SocketJS+StompJS).

最新推荐文章于 2023-09-12 16:47:58 发布

没有什么时间是比现在合适的

最新推荐文章于 2023-09-12 16:47:58 发布

阅读量470

点赞数

本文链接：https://blog.csdn.net/fangxuan1509/article/details/104052424

版权

实例代码

(function () {
	var vm = new Vue({
        el: '#inParkRecordApp',
        data: {
        	inParkRecordData:[],
        	imgUrl:"",
        	activeIndex:0
        },
        methods:{
        	getImg: function(event){
        		var e = event.currentTarget;
        		this.imgUrl = e.getAttribute("imgUrl");
        		this.activeIndex = e.getAttribute("thisIndex")
        	}
        }
    });
	var	socket=null;
	var stompClient=null;
	window.wsInParkRecord = {
		init:function(){
			// 建立连接对象（还未发起连接）
		    socket=new SockJS(dataUrl.util.getSocketServer());
		
		    // 获取 STOMP 子协议的客户端对象
		    stompClient = Stomp.over(socket);
		
		    // 向服务器发起websocket连接并发送CONNECT帧
		    stompClient.connect({},
		        function connectCallback (frame) {
		    	// 连接成功时（服务器响应 CONNECTED 帧）的回调方法
		    		console.log('已连接【' + frame + '】');
		    		stompClient.subscribe('/topic/inParkRecord', function (response) {
		    			var res = JSON.parse(response.body);
		    			vm.inParkRecordData.unshift(res);
		    			//设置存储记录上限为100，超过100自动删除最早的记录
		    			if(vm.inParkRecordData.length >= 100){
		    				vm.inParkRecordData = vm.inParkRecordData.slice(0,100);
		    			}
		    			vm.activeIndex = 0;
		    			vm.imgUrl = vm.inParkRecordData[0].picUrl;
		            });
			   },
		       function errorCallBack (error) {
		        	   // 连接失败时（服务器响应 ERROR 帧）的回调方法
		        		console.log('连接失败	【' + error + '】');
		       }
		    );
            //当连接意外断开时，触发websocket的onclose回调，重新连接
		    socket.onclose = function(){
		    	console.log("连接中断，正在尝试重新连接...")
		    	 setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
			      	wsInParkRecord.init();
			    }, 2000);
		    }
		}
	}
    //设置监听事件，当窗口关闭的时候，断开连接
	 window.onbeforeunload = function () {
      if (stompClient !== null) {
        stompClient.disconnect();
        socket.close();
      }
      console.log('断开连接');
    };
})();

websocket的一些API

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发(readyState变成3的时候)

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

STOMP

介绍

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

STOMP使得我们的websocket的通信更加简单方便。

STOMP帧

STOMP帧由命令，一个或多个头信息、一个空行及负载（文本或字节）所组成；

其中可用的COMMAND 包括：

CONNECT、SEND、SUBSCRIBE、UNSUBSCRIBE、BEGIN、COMMIT、ABORT、ACK、NACK、DISCONNECT；

例：
发送消息

SEND 
destination:/queue/trade 
content-type:application/json 
content-length:44 
{“action”:”BUY”,”ticker”:”MMM”,”shares”,44}^@

订阅消息

SUBSCRIBE 
id:sub-1 
destination:/topic/price.stock.* 
^@

服务器进行广播消息

MESSAGE 
message-id:nxahklf6-1 
subscription:sub-1 
destination:/topic/price.stock.MMM 
{“ticker”:”MMM”,”price”:129.45}^@

没有什么时间是比现在合适的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket(SocketJS+StompJS).

实例代码(function () { var vm = new Vue({ el: '#inParkRecordApp', data: { inParkRecordData:[], imgUrl:"", activeIndex:0 }, methods:{ g...
复制链接

扫一扫