实例代码
(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}^@