SpringBoot+Websocket实现一个简单的网页聊天功能代码
程序员文章站
2024-02-21 23:55:34
最近做了一个springboot的项目,被springboot那简介的配置所迷住。刚好项目中,用到了websocket。于是,我就想着,做一个springboot+webs...
最近做了一个springboot的项目,被springboot那简介的配置所迷住。刚好项目中,用到了websocket。于是,我就想着,做一个springboot+websocket简单的网页聊天demo。
效果展示:
当然,项目很简单,没什么代码,一眼就能明白
导入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>
这个就是全都的功能,非常简单,没什么特别的功能和代码。
最后附上github的源代码传送门
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: java转换字符串编码格式的方法