我只是上传一下代码,做一下代码笔记。
我看了那位博主的博客后,我大概觉得有以下思路:
- 首先是导入依赖,用了HTML5的一个 websocket 功能:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 接着是添加配制 WebSocketConfig.java
package com.example.java.webstock.demo.configWeb;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
package com.example.java.webstock.demo.configServer;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
@Component
@ServerEndpoint("/websocket/{sid}")
public class WebSocketServerController {
@OnMessage
public void onMessage(Session session, String message){
try {
session.getBasicRemote().sendText(message);
}catch (IOException e){
e.printStackTrace();
}
}
@OnOpen
public void onOpen(@PathParam("sid") String sid){
System.out.println("Client connected");
}
@OnClose
public void onClose(){
System.out.println("Connection closed");
}
@OnError
public void OnError(Throwable error){
System.out.println("Connection error");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing websockets</title>
</head>
<body>
<div>
<textarea rows="3" cols="20" id="content"></textarea>
<br>
<input type="submit" value="Start" onclick="start()" />
</div>
<div id="messages"></div>
<script type="text/javascript">
var webSocket =
new WebSocket('ws://localhost:8080/websocket/2020');
webSocket.onerror = function(event) {
onError(event)
};
webSocket.onopen = function(event) {
onOpen(event)
};
webSocket.onmessage = function(event) {
onMessage(event)
};
webSocket.onclose = function(event) {
onClose(event)
};
function onMessage(event) {
document.getElementById('messages').innerHTML
+= '<br />' + event.data;
}
function onOpen(event) {
document.getElementById('messages').innerHTML
= 'Connection established';
}
function onError(event) {
alert(event);
}
function onClose(event) {
alert(event);
}
function start() {
var text = document.getElementById('content').value;
webSocket.send(text);
}
</script>
</body>
</html>
- 这是测试结果:
- 然后这是实现多人在线聊天的功能
- GroupChatController.java
package com.example.java.webstock.demo.configServer;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
@Slf4j
@Component
@ServerEndpoint("/groupChat/{sid}/{username}")
public class GroupChatController {
private static ConcurrentHashMap<String, List<Session>> groupMemberInfoMap = new ConcurrentHashMap<>();
@OnMessage
public void onMessage(@PathParam("sid") String sid,@PathParam("username") String username, String message ){
List<Session> sessionList = groupMemberInfoMap.get(sid);
sessionList.forEach(item ->{
try{
String text = username+" : "+ message;
item.getBasicRemote().sendText(text);
} catch (IOException e) {
e.printStackTrace();
}
});
}
@OnOpen
public void onOpen(Session session, @PathParam("sid") String sid) {
List<Session> sessionList = groupMemberInfoMap.get(sid);
if (sessionList == null) {
sessionList = new ArrayList<>();
groupMemberInfoMap.put(sid,sessionList);
}
sessionList.add(session);
log.info("Connection connected");
log.info("sid: {}, sessionList size: {}", sid, sessionList.size());
}
@OnClose
public void onClose(Session session, @PathParam("sid") String sid) {
List<Session> sessionList = groupMemberInfoMap.get(sid);
sessionList.remove(session);
log.info("Connection closed");
log.info("sid: {}, sessionList size: {}", sid, sessionList.size());
}
@OnError
public void OnError(Throwable error) {
log.info("Connection error");
}
}
- 在这里遇到了一个坑点,那位博主的slf4j导入在pom.xml的时候用不了,我就去了setting里面导入了lombok才得以解决。这是一个日志。
- 然后就是index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing websockets</title>
</head>
<body>
<div>
<input type="text" id="sid" placeholder="请输入房间"/><br>
<input type="text" id="nickname" placeholder="请输入昵称"/><br>
<input type="submit" value="连接" onclick="connect()" /><br>
<textarea rows="3" cols="20" id="content"></textarea><br>
<input type="submit" value="发送" onclick="start()" />
<br>
</div>
<div id="messages"></div>
<script type="text/javascript">
var webSocket = null;
function onMessage(event) {
document.getElementById('messages').innerHTML
+= '<br />' + event.data;
}
function onOpen(event) {
document.getElementById('messages').innerHTML
= 'Connection established';
}
function onError(event) {
alert("发生错误");
}
function onClose(event) {
alert("连接关闭");
}
function connect() {
var sid = document.getElementById('sid').value;
var nickname = document.getElementById('nickname').value;
if (url == '' || nickname == '') {
alert("房间号和用户名不能为空");
return;
}
var serverHot = window.location.host;
var url = 'ws://localhost:8081/groupChat/' + sid + '/' + nickname;
webSocket = new WebSocket(url);
webSocket.onerror = function(event) {
onError(event)
};
webSocket.onopen = function(event) {
onOpen(event)
};
webSocket.onmessage = function(event) {
onMessage(event)
};
webSocket.onclose = function(event) {
onClose(event)
};
}
function start() {
var text = document.getElementById('content').value;
webSocket.send(text);
document.getElementById('content').value = '';
}
</script>
</body>
</html>
- 这是测试结果