You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
4.6 KiB
132 lines
4.6 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<title>websocket</title>
|
|
<script src="../../../static/js/websocket/jquery-1.4.min.js" th:src="@{/js/websocket/jquery-1.4.min.js}"></script>
|
|
<script src="../../../static/js/websocket/sockjs.min.js" th:src="@{/js/websocket/sockjs.min.js}"></script>
|
|
<script src="../../../static/js/websocket/stomp.min.js" th:src="@{/js/websocket/stomp.min.js}"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="margin: auto;text-align: center">
|
|
<h1>Welcome to websocket</h1>
|
|
</div>
|
|
<br/>
|
|
<div style="margin: auto;text-align: center">
|
|
<select id="onLineUser">
|
|
<option>--所有--</option>
|
|
</select>
|
|
<input id="text" type="text" />
|
|
<button onclick="send()">发送消息</button>
|
|
</div>
|
|
<br>
|
|
<div style="margin-right: 10px;text-align: right">
|
|
<button onclick="closeWebSocket()">关闭连接</button>
|
|
</div>
|
|
<hr/>
|
|
<div id="message" style="text-align: center;"></div>
|
|
<input type="text" th:value="${username}" id="username" style="display: none" />
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var webSocket;
|
|
var commWebSocket;
|
|
if ("WebSocket" in window)
|
|
{
|
|
webSocket = new WebSocket("ws://localhost:8080/webSocket");
|
|
|
|
//连通之后的回调事件
|
|
webSocket.onopen = function()
|
|
{
|
|
//webSocket.send( document.getElementById('username').value+"已经上线了");
|
|
console.log("已经连通了websocket");
|
|
setMessageInnerHTML("已经连通了websocket");
|
|
};
|
|
|
|
//接收后台服务端的消息
|
|
webSocket.onmessage = function (evt)
|
|
{
|
|
var received_msg = evt.data;
|
|
console.log("数据已接收:" +received_msg);
|
|
var obj = JSON.parse(received_msg);
|
|
console.log("可以解析成json:"+obj.messageType);
|
|
//1代表上线 2代表下线 3代表在线名单 4代表普通消息
|
|
if(obj.messageType==1){
|
|
//把名称放入到selection当中供选择
|
|
var onlineName = obj.openId;
|
|
var option = "<option>"+onlineName+"</option>";
|
|
$("#onLineUser").append(option);
|
|
setMessageInnerHTML(onlineName+"上线了");
|
|
}
|
|
else if(obj.messageType==2){
|
|
$("#onLineUser").empty();
|
|
var onlineName = obj.onlineUsers;
|
|
var offlineName = obj.username;
|
|
var option = "<option>"+"--所有--"+"</option>";
|
|
for(var i=0;i<onlineName.length;i++){
|
|
if(!(onlineName[i]==document.getElementById('username').value)){
|
|
option+="<option>"+onlineName[i]+"</option>"
|
|
}
|
|
}
|
|
$("#onLineUser").append(option);
|
|
|
|
setMessageInnerHTML(offlineName+"下线了");
|
|
}
|
|
else if(obj.messageType==3){
|
|
var onlineName = obj.onlineUsers;
|
|
var option = null;
|
|
for(var i=0;i<onlineName.length;i++){
|
|
if(!(onlineName[i]==document.getElementById('username').value)){
|
|
option+="<option>"+onlineName[i]+"</option>"
|
|
}
|
|
}
|
|
$("#onLineUser").append(option);
|
|
console.log("获取了在线的名单"+onlineName.toString());
|
|
}
|
|
else{
|
|
setMessageInnerHTML(obj.fromOpenId+"对"+obj.toOpenId+"说："+obj.chatType);
|
|
}
|
|
};
|
|
|
|
//连接关闭的回调事件
|
|
webSocket.onclose = function()
|
|
{
|
|
console.log("连接已关闭...");
|
|
setMessageInnerHTML("连接已经关闭....");
|
|
};
|
|
}
|
|
else{
|
|
// 浏览器不支持 WebSocket
|
|
alert("您的浏览器不支持 WebSocket!");
|
|
}
|
|
//将消息显示在网页上
|
|
function setMessageInnerHTML(innerHTML) {
|
|
document.getElementById('message').innerHTML += innerHTML + '<br/>';
|
|
}
|
|
|
|
function closeWebSocket() {
|
|
//直接关闭websocket的连接
|
|
webSocket.close();
|
|
}
|
|
|
|
function send() {
|
|
var selectText = $("#onLineUser").find("option:selected").text();
|
|
if(selectText=="--所有--"){
|
|
selectText = "All";
|
|
}
|
|
else{
|
|
setMessageInnerHTML(document.getElementById('username').value+"对"+selectText+"说："+ $("#text").val());
|
|
}
|
|
var message = {
|
|
"chatType":document.getElementById('text').value,
|
|
"fromOpenId":document.getElementById('username').value,
|
|
"toOpenId":selectText
|
|
};
|
|
webSocket.send(JSON.stringify(message));
|
|
$("#text").val("");
|
|
|
|
}
|
|
</script>
|
|
|
|
</html>
|