websocket(SocketJS+StompJS).

实例代码

(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 的关系:

  1. HTTP协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节,假设 HTTP 协议 并不存在,只能使用 TCP 套接字来 编写 web 应用,你可能认为这是一件疯狂的事情;
  2. 直接使用 WebSocket(SockJS) 就很类似于 使用 TCP 套接字来编写 web 应用,因为没有高层协议,就需要我们定义应用间所发送消息的语义,还需要确保连接的两端都能遵循这些语义;
  3. 同 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}^@
websocket(SocketJS+StompJS).websocket(SocketJS+StompJS). 剑指now 发布了35 篇原创文章 · 获赞 6 · 访问量 601 私信 关注
上一篇:websocket的前端实现


下一篇:将PHP与Orbited连接