基于SpringBoot+WebSocket搭建一个简单的多人聊天系统
前言
今天闲来无事,就来了解一下websocket协议。来简单了解一下吧。
websocket是什么
首先了解一下websocket是什么?websocket是一种在单个tcp连接上进行全双工通信的协议。这是一种比较官方的说法,简单点来说就是,在一次tcp连接中,通信的双方可以相互通信。比如a和b在打电话,a说话的时候,b也可以说话来进行信息的交互,这就叫做全双工通信。对应的是单工通信,和半双工通信,单工通信就是只能由a向b通信,比如电脑和打印机。半双工通信是可以ab可以互相通信,但是同一时间只能进行单向通信,比如对讲机。
websocket与http有啥区别
相同点
都建立在tcp之上,通过tcp协议来传输数据。
不同点
http协议为单向协议,即浏览器只能向服务器请求资源,服务器才能将数据传送给浏览器,而服务器不能主动向浏览器传递数据。分为长连接和短连接,短连接是每次http请求时都需要三次握手才能发送自己的请求,每个request对应一个response;长连接是短时间内保持连接,保持tcp不断开,指的是tcp连接。
websocket一种双向通信协议,在建立连接后,websocket服务器和客户端都能主动的向对方发送或接收数据,就像socket一样,不同的是websocket是一种建立在web基础上的一种简单模拟socket的协议;websocket需要通过握手连接,类似于tcp它也需要客户端和服务器端进行握手连接,连接成功后才能相互通信。websocket在建立握手连接时,数据是通过http协议传输的,“get/chat http/1.1”,这里面用到的只是http协议一些简单的字段。但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。
用处
websocket解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮询问题。
使用websocket搭建一个多人聊天系统
- 引入websocket的jar包
gradle:
compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.release'
maven:
<dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-websocket</artifactid> <version>2.1.8.release</version> </dependency>
- 添加对websocket的支持
注入serverendpointexporter,这个bean会自动注册使用了@serverendpoint注解声明的websocket endpoint。
import org.springframework.context.annotation.bean; import org.springframework.context.annotation.configuration; import org.springframework.web.socket.server.standard.serverendpointexporter; /** * @author: zp * @date: 2019-09-18 10:03 * @description: */ @configuration public class appconfiguration { @bean public serverendpointexporter serverendpointexporter(){ return new serverendpointexporter(); } }
- 创建websocket的实现类
@serverendpoint("/websocket/{page}")中的值就是需要访问的地址,和controller中的@requestmapping有点类似。然后实现@onopen(打开连接),@onclose(关闭连接),@onmessage(收到消息),@error(触发异常)。
import org.slf4j.logger; import org.slf4j.loggerfactory; 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.map; import java.util.set; import java.util.concurrent.concurrenthashmap; import java.util.concurrent.copyonwritearrayset; import java.util.concurrent.atomic.atomicinteger; /** * @author: zp * @date: 2019-09-20 15:12 * @description: */ @component @serverendpoint("/websocket/{page}") public class websocket { private logger log = loggerfactory.getlogger(this.getclass()); /** * 用来记录房间的人数 */ private static atomicinteger onlinepersons = new atomicinteger(0); /** * 用来记录房间及人数 */ private static map<string,set> roommap = new concurrenthashmap(8); @onopen public void open(@pathparam("page") string page, session session) throws ioexception { set set = roommap.get(page); // 如果是新的房间,则创建一个映射,如果房间已存在,则把用户放进去 if(set == null){ set = new copyonwritearrayset(); set.add(session); roommap.put(page,set); }else{ set.add(session); } // 房间人数+1 onlinepersons.incrementandget(); log.info("新用户{}进入聊天,房间人数:{}",session.getid(),onlinepersons); } @onclose public void close(@pathparam("page") string page, session session){ // 如果某个用户离开了,就移除相应的信息 if(roommap.containskey(page)){ roommap.get(page).remove(session); } // 房间人数-1 onlinepersons.decrementandget(); log.info("用户{}退出聊天,房间人数:{}",session.getid(),onlinepersons); } @onmessage public void reveivemessage(@pathparam("page") string page, session session,string message) throws ioexception { log.info("接受到用户{}的数据:{}",session.getid(),message); // 拼接一下用户信息 string msg = session.getid()+" : "+ message; set<session> sessions = roommap.get(page); // 给房间内所有用户推送信息 for(session s : sessions){ s.getbasicremote().sendtext(msg); } } @onerror public void error(throwable throwable){ try { throw throwable; } catch (throwable e) { log.error("未知错误"); } } }
写个超级简单的页面测试一下
前端有点菜,写不出好看的ui,见谅~
<html> <head> <meta charset="utf-8"></meta> <title>springboot项目websocket测试demo</title> </head> <body> <h3>springboot项目websocket测试demo</h3> <h4>测试说明</h4> <h5>文本框中数据数据,点击‘发送测试’,文本框中的数据会发送到后台websocket,后台接受到之后,会再推送数据到前端,展示在下方;点击关闭连接,可以关闭该websocket;可以跟踪代码,了解具体的流程;代码上有详细注解</h5> <br /> <input id="text" type="text" /> <button onclick="send()">发送测试</button> <hr /> <button onclick="clos()">关闭连接</button> <hr /> <div id="message"></div> <script> var websocket = null; if('websocket' in window){ websocket = new websocket("ws://127.0.0.1:9999/websocket/1"); }else{ alert("您的浏览器不支持websocket"); } websocket.onerror = function(){ setmessageinhtml("send error!"); } websocket.onopen = function(){ setmessageinhtml("连接成功!") settimeout(function(){setmessageinhtml("欢迎来到这里!") },2000) } websocket.onmessage = e => setmessageinhtml(e.data) websocket.onclose = function(){ setmessageinhtml("连接断开!") } window.onbeforeunload = function(){ clos(); } function setmessageinhtml(message){ document.getelementbyid('message').innerhtml += message+"</br>"; } function clos(){ websocket.close(3000,"强制关闭"); } function send(){ var msg = document.getelementbyid('text').value; websocket.send(msg); } </script> </body> </html>
测试
后记
希望我们每天都有一点小收获~
如果觉得有用就关注我吧~
下一篇: PHP给图片加上图片水印和文字水印实例
推荐阅读
-
从零搭建基于SpringBoot的秒杀系统(二):快速搭建一个SpringBoot项目
-
基于SpringBoot+WebSocket搭建一个简单的多人聊天系统
-
dojo 搭建基于xmpp的即时聊天系统
-
linux上的一个简单的多人聊天室
-
php使用swoole实现一个简单的多人在线聊天群发,swoole在线聊天
-
在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解
-
使用Servlet和JSP实现一个简单的Web聊天室系统
-
php使用swoole实现一个简单的多人在线聊天群发
-
php使用swoole实现一个简单的多人在线聊天群发
-
基于 IDEA 搭建一个简单的 SpringBoot 项目