本文參考:WebSocket的使用
效果如下:
1.修改jboot.properties
2.添加WebSocketTest.java
3.前端測試
1.修改jboot.properties
2.添加WebSocketTest.java
package cn.cyz.websocket;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class WebSocketTest {
//當前在線連接數
private static int onlineCount = 0;
//存儲每個客戶端的對象
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
//客戶端session
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
onlineCount++;
onMessage("有新連接加入!當前在線人數爲" + onlineCount, this.session);
}
@OnClose
public void close(){
webSocketSet.remove(this);
onlineCount--;
onMessage("有一連接關閉!當前在線人數爲" + onlineCount, this.session);
}
@OnMessage
public void onMessage(String message, Session session) {
for(WebSocketTest item: webSocketSet){
try {
//當對象處於開啓狀態下執行以下
item.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
}
3.前端測試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebSocket測試</title>
</head>
<body>
<input id="text" type="text" />
<button onclick="send()">發送消息</button>
<hr/>
<button onclick="closeWebSocket()">關閉WebSocket連接</button>
<hr/>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判斷當前瀏覽器是否支持WebSocket
if ('WebSocket' in window)
websocket = new WebSocket("ws://127.0.0.1:8888/websocket");
else
alert('當前瀏覽器 Not support websocket')
//連接發生錯誤的回調方法
websocket.onerror = function() {
setMessageInnerHTML("WebSocket連接發生錯誤");
};
//連接成功建立的回調方法
websocket.onopen = function() {
setMessageInnerHTML("WebSocket連接成功");
}
//接收到消息的回調方法
websocket.onmessage = function(event) {
setMessageInnerHTML(event.data);
}
//連接關閉的回調方法
websocket.onclose = function() {
setMessageInnerHTML("WebSocket連接關閉");
}
//監聽窗口關閉事件,當窗口關閉時,主動去關閉websocket連接,防止連接還沒斷開就關閉窗口,server端會拋異常。
window.onbeforeunload = function() {
closeWebSocket();
}
//將消息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//關閉WebSocket連接
function closeWebSocket() {
websocket.close();
}
//發送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>