安装依赖
"sockjs-client": "^1.5.0",
"stompjs": "^2.3.3",
项目引用
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
initWebSocket () {
this.connect()
const self = this
this.timer = setInterval(() => {
try {
console.log('成功')
} catch (err) {
console.log('断线了: ' + err)
self.connect()
}
}, 10000)
},
connect () {
const sock = new SockJS('http://110.61.76.221:8090/monitor')
this.stompClient = Stomp.over(sock)
this.stompClient.connect({}, (message) => {
this.subscribe()
}, error => {
this.initWebSocket()
})
},
sendMessage () {
this.stompClient.send('/app/chat', {}, JSON.stringify({}))
},
disconnect () {
if (this.stompClient !== null) {
this.stompClient.disconnect()
console.log('Disconnected')
}
},
subscribe () {
const _this = this
this.stompClient.subscribe('/topic/chat', function (msg) {
const obj = JSON.parse(msg.body)
}
})
},
原生写法
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Java后端WebSocket的Tomcat实现</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
Welcome<br /><input id="text" type="text" />
<button onclick="send()">发送消息</button>
<br />
<input id="b" type="text" /> <!-- 这里用于注册不同的clientId, 多个webSocket客户端只能同步收到相同clientId的消息 -->
<button onclick="connect()">连接</button>
<hr />
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr />
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
function connect() {
if ('WebSocket' in window) {
var value = $("#b").val();
websocket = new WebSocket("ws://localhost:8080/ws/websocket/" + value);
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
};
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
}
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
websocket.onclose = function () {
setMessageInnerHTML("WebSocket连接关闭");
}
window.onbeforeunload = function () {
closeWebSocket();
}
} else {
alert('当前浏览器 Not support websocket')
}
};
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
function closeWebSocket() {
websocket.close();
}
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>