二、IDEA开发
1.创建新的空项目
file->project struture->+->new module
点击next，选取依赖
创建成功后，先将依赖下载（右上角会有一个小的m图标，点击就可以）
2.创建文件
先创建三个文件ChatHandler，WebSocketConfig，index.html，位置如下
3.粘贴代码，将下面代码粘贴到对应文件
ChatHandler
package com.example.chatdemo;import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.io.*;
import java.nio.charset.StandardCharsets;
import java.nio.file.*;
import java.util.concurrent.CopyOnWriteArrayList;@Component
public class ChatHandler extends TextWebSocketHandler {private static final CopyOnWriteArrayList<WebSocketSession> sessions = new CopyOnWriteArrayList<>();private static final String LOG_FILE = "chat.log";// 新连接建立@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {sessions.add(session);System.out.println("新用户连接: " + session.getId());sendHistory(session);}// 处理消息@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {String msg = message.getPayload();System.out.println("收到消息: " + msg);// 广播消息（UTF-8编码保障）TextMessage encodedMsg = new TextMessage(msg.getBytes(StandardCharsets.UTF_8));broadcast(encodedMsg);// 持久化存储saveToFile(msg);}// 广播消息private void broadcast(TextMessage message) {sessions.forEach(s -> {try {if (s.isOpen()) {s.sendMessage(message);}} catch (IOException e) {System.err.println("消息发送失败: " + e.getMessage());}});}// 保存到文件（UTF-8编码）private void saveToFile(String message) {try (BufferedWriter writer = Files.newBufferedWriter(Paths.get(LOG_FILE),StandardCharsets.UTF_8,StandardOpenOption.CREATE,StandardOpenOption.APPEND)) {writer.write(message);writer.newLine();} catch (IOException e) {System.err.println("文件保存失败: " + e.getMessage());}}// 发送历史记录private void sendHistory(WebSocketSession session) {try {if (Files.exists(Paths.get(LOG_FILE))) {Files.lines(Paths.get(LOG_FILE), StandardCharsets.UTF_8).forEach(line -> {try {session.sendMessage(new TextMessage(line));} catch (IOException e) {System.err.println("历史消息发送失败: " + e.getMessage());}});}} catch (IOException e) {System.err.println("历史记录加载失败: " + e.getMessage());}}
}
WebSocketConfig
package com.example.chatdemo;import com.example.chatdemo.ChatHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {private final ChatHandler chatHandler;public WebSocketConfig(ChatHandler chatHandler) {this.chatHandler = chatHandler;}@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(chatHandler, "/chat").setAllowedOrigins("*");}
}
index.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>网络聊天室</title><style>#container {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ddd;border-radius: 5px;}#messages {height: 300px;border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;overflow-y: auto;}#status {color: #666;font-size: 0.9em;margin-bottom: 10px;}input[type="text"] {width: 70%;padding: 8px;margin-right: 5px;}button {padding: 8px 15px;background: #007bff;color: white;border: none;border-radius: 3px;cursor: pointer;}button:hover {background: #0056b3;}</style>
</head>
<body>
<div id="container"><div id="status">连接状态：等待连接...</div><div id="messages"></div><div><input type="text" id="msgInput" placeholder="输入消息..."><button onclick="sendMessage()">发送</button></div>
</div><script>let socket;const statusDiv = document.getElementById('status');const messagesDiv = document.getElementById('messages');// 初始化WebSocket连接function connect() {socket = new WebSocket('ws://' + window.location.host + '/chat');socket.onopen = () => {statusDiv.innerHTML = '连接状态：<span style="color:green">已连接</span>';console.log('WebSocket连接已建立');};socket.onmessage = (event) => {const msg = document.createElement('div');msg.textContent = event.data;messagesDiv.appendChild(msg);messagesDiv.scrollTop = messagesDiv.scrollHeight;};socket.onerror = (error) => {statusDiv.innerHTML = '连接状态：<span style="color:red">连接错误</span>';console.error('WebSocket错误:', error);};socket.onclose = () => {statusDiv.innerHTML = '连接状态：<span style="color:gray">已断开</span>';console.log('WebSocket连接已关闭');};}// 发送消息function sendMessage() {const input = document.getElementById('msgInput');if (input.value.trim()) {if (socket.readyState === WebSocket.OPEN) {socket.send(input.value);input.value = '';} else {alert('连接未就绪，请稍后重试！');}}}// 初始化连接connect();
</script>
</body>
</html>
3.本地运行
在浏览器输入网址，访问聊天室，出现下面的界面代表本地部署成功，代码成功
