config
/**
* WebSocket配置類
* 開啟WebSocket支持
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
/**
* WebSocket服務端
*/
//客戶端向服務器端建立WebSocket連接的URL
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {
//靜態(tài)變量炸站，用來記錄當前在線連接數(shù)彻桃，可選
private static int onlineCount = 0;
//concurrent包的線程安全set妆兑，用來存放每個客戶端對應的MyWebSocket對象
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
//與某個客戶端的連接會話昧港，需要通過它來給客戶端發(fā)送數(shù)據(jù)
private Session session;
/**
* 連接建立成功調用的方法
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this);
addOnlineCount(); //在線數(shù)加1
System.out.println("有新窗口開始監(jiān)聽,當前在線人數(shù)為" + getOnlineCount());
try {
sendMessage("連接成功");
} catch (IOException e) {
System.out.println("WebSocket IO異常");
}
}
/**
* 連接關閉調用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //從set中刪除
subOnlineCount(); //在線數(shù)減1
System.out.println("有連接關閉稿静！當前在線人數(shù)為" + getOnlineCount());
}
/**
* 收到客戶端消息后調用的方法
*
* @param message 客戶端發(fā)送過來的消息
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("收到客戶端的信息:" + message);
//群發(fā)消息
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("發(fā)生錯誤");
error.printStackTrace();
}
/**
* 實現(xiàn)服務器主動推送
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 群發(fā)自定義消息
*/
public static void sendInfo(String message) throws IOException {
System.out.println("推送消息內容:" + message);
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
continue;
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketServer.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketServer.onlineCount--;
}
}
Controller層
@RestController
public class WebSocketController {
@RequestMapping("/socket/push")
public String pushMsg(HttpServletRequest request) {
String message = request.getParameter("fuwu");
try {
WebSocketServer.sendInfo(message);
} catch (IOException e) {
e.printStackTrace();
}
return "server";
}
}
頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket</title>
</head>
<body>
<h2>websocket</h2>
<h1>服務器端信息顯示區(qū)</h1>
<textarea id="fuwu" style="width: 200px; height: 300px">
</textarea>
<h1>客戶信息輸入?yún)^(qū)</h1>
<textarea id="kehu" style="width: 200px">
</textarea>
<button onclick="myFirst()">發(fā)送</button>
<script>
function myFirst() {
socket.send(document.getElementById("kehu").value);
document.getElementById("kehu").value =null;
}
var socket;
if (typeof(WebSocket) == "undefined") {
console.log("您的瀏覽器不支持WebSocket");
} else {
console.log("您的瀏覽器支持WebSocket");
//實現(xiàn)化WebSocket對象娇掏，指定要連接的服務器地址與端口建立連接
socket = new WebSocket("ws://localhost:8080/websocket");
// 打開事件
socket.onopen = function () {
console.log("Socket已打開");
// socket.send("這是來自客戶端的消息:" + new Date());
};
//獲得服務器端消息事件
socket.onmessage = function (msg) {
console.log(msg.data);
alert(msg.data);
document.getElementById("fuwu").value = document.getElementById("fuwu").value+"\n"+ msg.data;
};
//關閉事件
socket.onclose = function () {
console.log("Socket已關閉");
};
//發(fā)生了錯誤事件
socket.onerror = function () {
alert("Socket發(fā)生了錯誤");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>服務器</title>
</head>
<body>
<h1>
<form action="/socket/push" name="loginfrom" accept-charset="utf-8" method="post">
<textarea id="fuwu" name="fuwu">
</textarea>
<input type="submit" value="群發(fā)" >
</form>
</h1>
</body>
</html>
