String s = message.getPayload();
logger.info("from client: ");
logger.info(s);
//String json = "this is from service" ;// 根据输入消息构造待发送消息
broadcastMessage(s); // 推送给所有用户
}
public void broadcastMessage(String json ) throws IOException {
//String json = ...
TextMessage message = new TextMessage(json);
for (String id : clients.keySet()) {
WebSocketSession session = clients.get(id);
session.sendMessage(message);
}
}
}
**2. ChatHandshakeInterceptor **
@Component
public class ChatHandshakeInterceptor extends HttpSessionHandshakeInterceptor {
public ChatHandshakeInterceptor() {
super(Collections.singleton(UserController.KEY_USER));
}
}
//发送消息
function send() {
var inputText =$("#inputbox").val();
var dateTime = (new Date()).getTime();
console.log(inputText);
window.chatWs.send(JSON.stringify({name:name,text: inputText,dateTime:dateTime}));
$("#inputbox").val("");
}
</script>
净净一隅
1. ChatHandler
@Component
public class ChatHandler extends TextWebSocketHandler {
// 保存所有Client的WebSocket会话实例:
private Map<String, WebSocketSession> clients = new ConcurrentHashMap<>();
private static Logger logger = LoggerFactory.getLogger(ChatHandler.class);
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 新会话根据ID放入Map:
clients.put(session.getId(), session);
session.getAttributes().put("name", "Guest1");
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
clients.remove(session.getId());
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
String s = message.getPayload();
logger.info("from client: ");
logger.info(s);
//String json = "this is from service" ;// 根据输入消息构造待发送消息
broadcastMessage(s); // 推送给所有用户
}
public void broadcastMessage(String json ) throws IOException {
//String json = ...
TextMessage message = new TextMessage(json);
for (String id : clients.keySet()) {
WebSocketSession session = clients.get(id);
session.sendMessage(message);
}
}
}
**2. ChatHandshakeInterceptor **
@Component
public class ChatHandshakeInterceptor extends HttpSessionHandshakeInterceptor {
public ChatHandshakeInterceptor() {
super(Collections.singleton(UserController.KEY_USER));
}
}
3. AppConfig
@EnableWebSocket
public class AppConfig {
。。。。。
@Bean
WebSocketConfigurer createWebSocketConfigurer(@Autowired ChatHandler chatHandler, @Autowired ChatHandshakeInterceptor chatInterceptor)
{
return new WebSocketConfigurer() {
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// 把URL与指定的WebSocketHandler关联，可关联多个:
registry.addHandler(chatHandler, "/chat").addInterceptors(chatInterceptor);
}
};
}
。。。。
}
4. index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[http://www.w3.org/TR/html4/loose.dtd](http://www.w3.org/TR/html4/loose.dtd)"\>
<html lang\="en" xmlns:th\="[http://www.thymeleaf.org](http://www.thymeleaf.org)"\> <head> <meta charset\="UTF-8"\> <title>{{ \_('home') }}</title> <link href\="/static/css/bootstrap.min.css" rel\="stylesheet"\> <style> div{ width:373px; height:100px; margin:5px;} .border1{ border:1px solid #000;} /\*边框5像素、虚线、黑色\*/ </style> </head> <body> <div class\="col-md-5"\> {% set name = user.getName %} <h2>Welcome,{{name!=null?name:"Guest"}} </h2> <input type\="hidden" id\='name' value\={{name}}\> <p> {% if name==null %} <a href\="/signin"\>Sign in</a> <a href\="/register"\>register</a></p> {% else %} <a href\="/signout"\>Sign out</a> {% endif %} </p> <p> 切换到 {% if \_\_locale\_\_.getLanguage == "zh" %} <a href\="/locale/en\_US"\>英 文</a> {% else %} <a href\="/locale/zh\_CN"\>Chinese</a> {% endif %} </p> {% if name!=null %} Chat Room: <div id\="showBox" style\="overflow:scroll; width:373px; height:300px;border:1px solid #000;"\></div> <br/> <br/> <br/> <div>message:<br/> <textarea id\="inputbox" rows\="3" cols\="50"\></textarea> <button type\="button" onclick\="send()" \>send</button> </div> {% endif %} </div> <script type\="text/javascript" src\="/static/js/jquery-3.5.1.min.js"\></script> <script type\="text/javascript" src\="/static/js/bootstrap.min.js"\></script> <script type\="text/javascript" src\="/static/js/moment.min.js"\></script> <script th:inline\="text/javascript"\> var name\= $("#name").val(); // 创建WebSocket连接: var ws \= new WebSocket('ws://' \+ location.host \+ '/chat'); // 连接成功时: ws.addEventListener('open', function (event) { console.log('websocket connected.'); }); // 收到消息时: ws.addEventListener('message', function (event) { console.log('message: ' \+ event.data); var msgs = JSON.parse(event.data); var dateTime=moment((new Date()).setTime(msgs.dateTime)).format("YYYY/MM/DD HH:mm:ss"); console.log(dateTime); var msg=msgs.name+" "+dateTime+"<br/>"+msgs.text; // TODO: var oldMsg=document.getElementById("showBox").innerHTML document.getElementById("showBox").innerHTML\=oldMsg+'<br/>'+msg; }); // 连接关闭时: ws.addEventListener('close', function () { console.log('websocket closed.'); }); // 绑定到全局变量: window.chatWs \= ws;
//发送消息
function send() {
var inputText =$("#inputbox").val();
var dateTime = (new Date()).getTime();
console.log(inputText);
window.chatWs.send(JSON.stringify({name:name,text: inputText,dateTime:dateTime}));
$("#inputbox").val("");
}
</script>
</body> </html>