HTML
<div class="wrapper-content">
<div class="panel">
<div class="panel-header">定时任务列表</div>
<div class="panel-body">
<div>userId<input id="userId" name="userId" type="text" th:value="${userId}"></div>
<div>toUserId<input id="toUserId" name="toUserId" type="text" value="2"></div>
<div>发送消息<input id="sendMsg" name="sendMsg" type="text" value="hello websocket"></div>
<div>操作开启socket<button onclick="openSocket()">开启 Socket</button></div>
<div>操作发送消息<button onclick="sendMessage()">发送消息</button></div>
</div>
</div>
</div>
JS
var websocket = {};
function openSocket() {
var userId = document.getElementById('userId').value;
if (userId == "" ) {
console.warn("roleId, 不能为空")
return;
}
if ('WebSocket' in window) {
if (websocket != null) {
websocket.CLOSED;
websocket = null;
}
var host = window.location.host;
var url = "http://"+ host +"/websocket/online/"+ userId;
url = url.replace("https", "ws").replace("http", "ws");
websocket = new WebSocket(url);
} else {
console.warn('您的浏览器不支持WebSocket')
}
websocket.onopen = function(event) {
console.log("onopen ......");
}
websocket.onmessage = function(event) {
var res = JSON.parse(event.data);
// 根据返回的信息,做相关的业务处理
if (res.code === 402) {
console.log("您已被强制退出")
}
}
websocket.onclose = function() {
console.log("onclose......");
}
websocket.onerror = function() {
console.warn("onerror: 发生错误 ......");
}
window.onbeforeunload = function() {
websocket.CLOSED;
}
}
openSocket()
function sendMessage() {
if (websocket == "") {
alert("请先开启Socket")
return;
}
if ('WebSocket' in window) {
var data = {
userId: $("#toUserId").val(),
message: $("#sendMsg").val()
};
websocket.send(JSON.stringify(data));
} else {
console.warn("您的浏览器不支持WebSocket");
}
}