这篇文章将为大家详细讲解有关在SpringBoot中利用Websocket实现一个网页聊天功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
导入websocket的包。
通过使用SpringBoot导入包的时候，我们可以发现，很多包都是以 spring-boot-starter 开头的，对于我这种强迫症 ，简直是福音
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
配置websocket
服务端
首先新建一个WebSocketConfig的类，添加 @Component 注解 注入一个bean
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}新建一个service，本来觉得是新建一个控制器，但是我觉得这也不是控制器，但是也不太是service。最后还是选择新建一个servece。这里你如果有更好的想法可以按照你的来。
这个service里面有4个方法，这些方法很简单，通过名称就可以看出是什么意思。
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();
private MessageVO messageVO = new MessageVO();
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSockets.add(this);
messageVO.setType(1);
messageVO.setUserNum(webSockets.size());
messageVO.setMessage("有新的连接");
ObjectMapper mapper = new ObjectMapper();
String Json = "";
try {
Json = mapper.writeValueAsString(messageVO);
} catch (Exception ex) {
log.error(ex.getMessage());
}
this.sendMessage(Json);
log.info("【websocket消息】有新的连接, 总数:{}", webSockets.size());
}
@OnClose
public void onClose() {
webSockets.remove(this);
messageVO.setType(2);
messageVO.setUserNum(webSockets.size());
messageVO.setMessage("有用户离开");
ObjectMapper mapper = new ObjectMapper();
String Json = "";
try {
Json = mapper.writeValueAsString(messageVO);
} catch (Exception ex) {
log.error(ex.getMessage());
}
this.sendMessage(Json);
log.info("【websocket消息】连接断开, 总数:{}", webSockets.size());
}
@OnMessage
public void onMessage(String message) {
messageVO.setType(3);
messageVO.setUserNum(webSockets.size());
messageVO.setMessage(message);
ObjectMapper mapper = new ObjectMapper();
String Json = "";
try {
Json = mapper.writeValueAsString(messageVO);
} catch (Exception ex) {
log.error(ex.getMessage());
}
this.sendMessage(Json);
log.info("【websocket消息】收到客户端发来的消息:{}", message);
}
public void sendMessage(String message) {
for (WebSocket webSocket : webSockets) {
log.info("【websocket消息】广播消息, message={}", message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}客户端
客户端也就是我们的html，我用的是原生html5的websocket ,不需要其他的js。直接在html中写js就可以
<script type="application/javascript">
var websocket = null;
var cahtNum = $('.chat-num').text();
if ('WebSocket' in window) {
websocket = new WebSocket('ws://localhost:8080/chat/webSocket');
} else {
alert('该浏览器不支持websocket');
}
websocket.onopen = function (event) {
console.log('websocket建立连接');
}
websocket.onclose = function (event) {
console.log('websocket关闭连接');
}
websocket.onmessage = function (event) {
console.log('websocket收到消息' + event.data);
var result = $.parseJSON(event.data);
if (result.type == 3) {
var element = document.getElementById('message-template').innerHTML;
$('.message-container').append(element);
$(".message-content:last").html(result.message);
}
else {
$('.chat-num').text(result.userNum);
}
}
websocket.onerror = function (event) {
console.log('websocket通信发生错误');
}
window.onbeforeunload = function (event) {
websocket.close();
}
$('.send-message').click(function () {
var message = $('.chat-message').val();
if (message == "") {
mdui.alert('请输入要发送的消息');
return;
}
sendmessage(message);
$('.chat-message').val("");
})
function sendmessage(message) {
websocket.send(message);
}
</script>关于在SpringBoot中利用Websocket实现一个网页聊天功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
