首先用Springboot搭建一個web項目~~~
![這裏寫圖片描述]()
index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="display" style="width: 500px;height: 500px;"></div>
<input type="text" id="message">
<button onclick="send()">Send</button>
<script>
var websocket = null;
if ("WebSocket" in window) {
websocket = new WebSocket("ws://localhost:8080/chatroom");
} else {
alert("websocket not supported");
}
websocket.onopen = function () {
setMessageInnerHTML("open");
};
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
};
websocket.onclose = function () {
setMessageInnerHTML("close");
};
websocket.onbeforeunload = function () {
websocket.close();
};
function send() {
var message = document.getElementById("message").value;
websocket.send(message);
document.getElementById("message").value = "";
}
function setMessageInnerHTML(message) {
document.getElementById("display").innerHTML += message + "<br/>";
}
</script>
</body>
</html>
java Socket頁面
package com.example.base.socket;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint("/chatroom")
@Component
public class ChatSocket {
private Session session;
private static CopyOnWriteArraySet<ChatSocket> set = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session) {
this.session = session;
set.add(this);
System.out.println("socket open");
}
@OnClose
public void onClose() {
set.remove(this);
System.out.println("socket close");
}
@OnMessage
public void onMessage(String message) {
System.out.println("from client:" + message);
for (ChatSocket socket : set) {
try {
socket.sendMessage(message);
} catch (IOException e) {
}
}
}
@OnError
public void onError(Throwable error) {
System.out.println("error occurred");
error.printStackTrace();
}
private void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
}
Socket配置類
package com.example.base
import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.web.socket.server.standard.ServerEndpointExporter
@Configuration
public class SocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter()
}
}
測試效果
![這裏寫圖片描述]()
