【十五】springboot整合WebSocket实现聊天室

互相交流入口地址 

整体目录：

【一】springboot整合swagger

【二】springboot整合自定义swagger

【三】springboot整合token

【四】springboot整合mybatis-plus

【五】springboot整合mybatis-plus

【六】springboot整合redis

【七】springboot整合AOP实现日志操作

【八】springboot整合定时任务

【九】springboot整合redis实现启动服务时热点数据保存在全局和缓存

【十】springboot整合quartz实现定时任务优化

【十一】springboot整合异步调用并获取返回值

【十二】springboot整合WebService

【十三】springboot整合WebService关于传参数

【十四】springboot整合WebSocket

【十五】springboot整合WebSocket实现聊天室

【十六】RabbitMQ基础篇（下载安装并基础使用，内含各种坑问题）

【十七】RabbitMQ基础篇（延迟队列和死信队列实战）

【十八】springboot实现自定义全局异常处理

【十九】初学Kafka并实战整合SpringCloudStream进行使用

【二十】springboot整合ElasticSearch实战（万字篇）

【二十一】springboot整合过滤器实战

【二十二】springboot整合拦截器实战并对比过滤器

【二十三】springboot整合activiti7（1）实战演示篇

【二十四】springboot整合spring事务详解以及实战

【二十五】springboot使用EasyExcel和线程池实现多线程导入Excel数据

【二十六】springboot整合jedis和redisson布隆过滤器处理缓存穿透

【二十七】springboot实现多线程事务处理

【二十八】springboot之threadLocal参数解析器实现session一样保存当前登录功能 

【二十九】springboot整合logback实现日志管理

【三十】springboot项目上高并发解决示例

目录

第一步：改造WebSocket

第二步：创建前端html文件

第三步：演示

---

        介绍：接下来我会把学习阶段学到的框架等知识点进行整合，每一次整合是在前一章的基础上进行的，所以后面的整合不会重复放前面的代码。每次的demo我放在结尾，本次是接着上一章的内容延续的，只增加新增的或者修改的代码。

        上一章是初步整合websocket之后实现了一个进度条的小demo，这次使用websocket实现聊天室功能，实现多个用户在线聊天以及私聊。

         首先我先展示一下效果图（随便弄的，界面比较丑陋）：

        我再展示一下我的目录结构（前端我用的HbuilderX）：

        前端就一个html文件，引用的线上的jquery和bootstrap，所以我没有写样式文件。

        后端相比上一章没有新增文件。只是进行了WebSocket文件的改造，websocket的依赖不需要导了，上一章已经导入了。

第一步：改造WebSocket

package ;

import ;
import .slf4j.Slf4j;
import ;

import ;
import ;
import ;
import ;
import ;
import ;
import ;
import .*;
import ;

/**
 * @ClassName WebSocketConfig
 * @Description TODO
 * @Author zrc
 * @Date 11:01
 * @Version 1.0
 **/
//注册成组件
@Component
//定义websocket服务器端，它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址
@ServerEndpoint("/websocket/{username}")
//如果不想每次都写private  final Logger logger = (当前类名.class); 可以用注解@Slf4j;可以直接调用
@Slf4j
public class WebSocket {

    //实例一个session，这个session是websocket的session
    private Session session;

    //存放当前用户名
    private String userName;

    //存放需要接受消息的用户名
    private String toUserName;

    //存放在线的用户数量
    private static Integer userNumber = 0;

    //存放websocket的集合（本次demo不会用到，聊天室的demo会用到）
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    //前端请求时一个websocket时
    @OnOpen
    public void onOpen(Session session,@PathParam("username") String username) throws IOException {
         = session;
        //将当前对象放入webSocketSet
        (this);
        //增加在线人数
        userNumber++;
        //保存当前用户名
         = username;
        //获得所有的用户
        Set<String> userLists = new TreeSet<>();
        for (WebSocket webSocket : webSocketSet) {
            ();
        }

        //将所有信息包装好传到客户端(给所有用户)
        Map<String, Object> map1 = new HashMap();
        //  把所有用户列表
        ("onlineUsers", userLists);
        //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
        ("messageType", 1);
        //  返回用户名
        ("username", username);
        //  返回在线人数
        ("number", );
        //发送给所有用户谁上线了，并让他们更新自己的用户菜单
        sendMessageAll((map1),);
        ("【websocket消息】有新的连接, 总数:{}", );

        // 更新在线人数(给所有人)
        Map<String, Object> map2 = new HashMap();
        //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
        ("messageType", 3);
        //把所有用户放入map2
        ("onlineUsers", userLists);
        //返回在线人数
        ("number", );
        // 消息发送指定人（所有的在线用户信息）
        sendMessageAll((map2),);
    }

    //前端关闭时一个websocket时
    @OnClose
    public void onClose() throws IOException {
        //从集合中移除当前对象
        (this);
        //在线用户数减少
        userNumber--;
        Map<String, Object> map1 = new HashMap();
        //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
        ("messageType", 2);
        //所有在线用户
        ("onlineUsers", );
        //下线用户的用户名
        ("username", );
        //返回在线人数
        ("number", userNumber);
        //发送信息，所有人，通知谁下线了
        sendMessageAll((map1),);
        ("【websocket消息】连接断开, 总数:{}", ());
    }

    //前端向后端发送消息
    @OnMessage
    public void onMessage(String message) throws IOException {
        ("【websocket消息】收到客户端发来的消息:{}", message);
        //将前端传来的数据进行转型
         jsonObject = (message);
        //获取所有数据
        String textMessage = ("message");
        String username = ("username");
        String type = ("type");
        String tousername = ("tousername");
        //群发
        if(("群发")){
            Map<String, Object> map3 = new HashMap();
            ("messageType", 4);
            //所有在线用户
            ("onlineUsers", );
            //发送消息的用户名
            ("username", username);
            //返回在线人数
            ("number", userNumber);
            //发送的消息
            ("textMessage", textMessage);
            //发送信息，所有人，通知谁下线了
            sendMessageAll((map3),);
        }
        //私发
        else{
            //发送给对应的私聊用户
            Map<String, Object> map3 = new HashMap();
            ("messageType", 4);
            //所有在线用户
            ("onlineUsers", );
            //发送消息的用户名
            ("username", username);
            //返回在线人数
            ("number", userNumber);
            //发送的消息
            ("textMessage", textMessage);
            //发送信息，所有人，通知谁下线了
            sendMessageTo((map3),tousername);

            //发送给自己
            Map<String, Object> map4 = new HashMap();
            ("messageType", 4);
            //所有在线用户
            ("onlineUsers", );
            //发送消息的用户名
            ("username", username);
            //返回在线人数
            ("number", userNumber);
            //发送的消息
            ("textMessage", textMessage);
            //发送信息，所有人，通知谁下线了
            sendMessageTo((map3),username);
        }
    }

    /**
     *  消息发送所有人
     */
    public void sendMessageAll(String message, String FromUserName) throws IOException {
        for (WebSocket webSocket: webSocketSet) {
            //消息发送所有人（同步）getAsyncRemote
            ().sendText(message);
        }
    }

    /**
     *  消息发送指定人
     */
    public void sendMessageTo(String message, String ToUserName) throws IOException {
        //遍历所有用户
        for (WebSocket webSocket : webSocketSet) {
            if ((ToUserName)) {
                //消息发送指定人
                ().sendText(message);
                ("【发送消息】:", +"向"+ToUserName+"发送消息："+message);
                break;
            }
        }
    }

}

        下面，我逐步介绍：

1、定义全局变量

        首先定义几个全局变量：

•         username用于保存当前的websocket连接传过来的用户名，作为websocket的唯一标识，后面私聊时通过这个唯一标识发送消息给对应的websocket连接。
•         userNumber用于保存更新在线用户数，每次新增或断开一个websocket连接之后，更新该在线用户数。
•         webSocketSet用于保存在线的所有websocket对象，是个websocket对象的集合，使用Set集合，保证不会出现重复的对象，后面私发或群发时通过遍历该对象，将消息发送给对应的对象。

2、新增两个发送消息的方法

        sendMessageAll是将消息发送给全部websocket对象，从上面可以看到，遍历websocket集合的所有对象，调用websocket的session里面的getBasicRemote的sendText方法发送传入的message消息。

        sendMessageTo是将消息发送给指定的websocket对象，从上面可以看到，遍历websocket集合的所有对象，当用户名满足传入的接受用户时，调用websocket的session里面的getBasicRemote的sendText方法发送传入的message消息。

3、改造onOpen

        @PathParam("username") String username用来接受前端传入的用户名，注意在ServerEndpoint注解参数改一下，加上用户名的传输。

        在onopen里面增加全局的在线人数以及websocket对象集合，保存当前用户名。

遍历webSocketSet集合，获取出来所有在线用户。

        将所有前端需要的信息包装到map，调用sendMessageAll方法，通知所有在线用户，某某用户上线了。

        此处为了前端方便处理，调用两次sendMessageAll方法，type如上图所示，分别两次sendMessageAll方法处理上线通知和用户列表更新通知。

4、改造onClose

        该方法是连接关闭时触发，所以将当前websocket对象从websocket的集合从移除并减少在线用户数，将前端需要的数据包装好后调用sendMessageAll方法，通知前端某某用户下线了。

5、改造onMessage

        onMessage方法是接受前端传来数据时触发。

        通过方法解析前端传过来的数据。

        获取message里面的键值对数据

        判断是群发还是私发然后调用不同的方法。

        此处私发时需要发送给对应的websocket对象还需要发送给自己。

后端的改造到此结束，下面介绍前端的代码。

第二步：创建前端html文件

<!DOCTYPE HTML>
<html>
<head>
    <title>聊天室</title>
	<link rel="stylesheet" href="/bootstrap/4.3.1/css/" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="/jquery-3.3." integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="/ajax/libs//1.14.7/umd/" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="/bootstrap/4.3.1/js/" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script src="/jquery-3.1."></script>
</head>
 
<body style="padding-left: 200px;padding-right: 200px;">
	<div class="alert alert-primary" style="margin-bottom: -20px;text-align: center;" role="alert">聊天室</div>
    <div class="jumbotron" style="height: 500px;width: 1135px;">
		<!-- 用户列表 -->
		<div class="jumbotron" style="height: 500px;width: 200px;float: right;background-color: green;margin-top: -65px;margin-right: -30px;">
			<div class="alert alert-primary" role="alert" style="width: 200px;margin-top: -43px;margin-left: -32px;">在线用户列表：</div>
			<ul class="list-group"  style="width: 200px;margin-top: -18px;margin-left: -32px;">

			</ul>
		</div>
		<div  style="height: 500px;width: 900px;background-color: white;margin-top: -45px;margin-left: -20px;">
			
		</div>
    </div>
	<div class="form-group">
	    <input type="text" style="width: 90%;;float: left;" class="form-control"   placeholder="请输入内容">
		<button type="button" style="width: 10%;float: left;" class="fasong">发送</button>
		<button type="button" style="width: 10%;float: left;" class="qingping">清屏</button>
	</div>
</body>
 
<script type="text/javascript">
	
	//私发全局消息
	var tomessage = "";
	//私发用户名称
	var tousername = "";
	//清屏
	$(".qingping").click(function(){
		$("#content").html(``);
	})
	
	//生成一个随机用户名
	var username = "用户"+()*100;
	
	//定义一个websocket
    var websocket = null;
 
    //判断当前浏览器是否支持WebSocket（固定写法）
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8090/websocket/"+username);
    }else{
        alert('浏览器不支持websocket')
    }
 
    //连接发生错误的回调方法
     = function(){
        ("发生错误");
    };
 
    //连接成功建立的回调方法
     = function(event){
        ("建立连接"+"event");
    }
 
    //接收到消息的回调方法
     = function(event){
		var data = ();
		(())
		
		//更新content的内容（上线）
		if(=="1"){
			// ("成功")
			$("#content").append(`<span style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;">`++"上线了"+`</span><br>`);
		}
		//更新content的内容（下线）
		if(=="2"){
			// ("成功")
			$("#content").append(`<span style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;">`++"下线了"+`</span><br>`);
		}
		//更新content的内容（更新用户列表）
		if(=="3"){
			//先清空
			$("#userlist").html(``);
			var list = ;
			(list)
			for(var i=0;i<;i++){
				$("#userlist").append(`<li style="cursor:pointer;" class="list-group-item" onclick="friend(this)" values="`+list[i]+`">`+list[i]+`</li>`);
			}
		}
		//更新content的内容（更新用户群发消息）
		if(=="4"){
			// (data);
			$("#content").append(`<span style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;">`++`说:`++`</span><br>`);
		}
		
	}
 
	//选择用户
	function friend(e){
		(e);
		$("#message").val("@ "++" ");
		var data = ;
		(data);
		tousername = data;
	}
 
    //连接关闭的回调方法
     = function(){
        ("关闭连接");
    }
 
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
     = function(){
		alert("已关闭连接");
        ();
    }
 
	//发送按钮
	$(".fasong").click(function(){
		
		("发送消息")
		var message = $("#message").val();
		//判断是群发还是私发
		(message);
		//获取发送对象
		tousername = (' ')[1];
		//获取发送消息
		tomessage = (' ')[2];
		(tomessage);
		(tousername);
		if(("@")!=-1){
			//私发
			("私发")
			var param = {};
			param['username'] = username;
			param['message'] = tomessage;
			param['type'] = '私发';
			param['tousername'] = tousername;
		}
		else{
			//群发
			("群发")
			var param = {};
			param['username'] = username;
			param['message'] = message;
			param['type'] = '群发';
			param['tousername'] = '';
		}
		//发送消息到后端
		((param));
	})
	
</script>
</html>

下面介绍各部分代码：

1、html代码

        这部分代码没什么说的，我为了方便直接使用的bootstrap框架 。

2、js代码

        为了简便，又为了每个websocket的用户名唯一，我直接使用的随机数，在新建websocket实例里面，新增一个username参数的传递。

        接收到消息的回调方法，先使用(）方法解析一下数据格式，再通过判断传来的数据类型type，分别进行处理。

        新增一个用户列表点击功能，点击时，将输入框显示如下，便于私聊：

        发送按钮，获取要发送的数据，将数据包装好，调用websocket的send方法发送到后端，后端通过OnMessage注解的方法进行处理。

完毕！

第三步：演示

        此处我跑了四个websocket实例，如下：

        可见，通知上线实现正常，接下来关闭实例4，如下：

        下线通知正常，下面展示发送消息

 

 

        可以看到群发成功，点击用户列表的某一用户，展示私发。

        可以看到，私发只有选择的那个人可以收到消息。

        到此，整合完毕。

        本期整合到此完毕，接下来会继续更新加强整合，尽情期待。

        客户端访问地址：http://localhost:8090/或者http://localhost:8090/

修改（2021/10/9）

        上面的代码忘记实现用户下线时更新用户列表

        修改一下onClose注解注解的onClose方法，如下：

 //前端关闭时一个websocket时
    @OnClose
    public void onClose() throws IOException {
        //从集合中移除当前对象
        (this);
        //在线用户数减少
        userNumber--;

        //通知下线
        Map<String, Object> map1 = new HashMap();
        //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
        ("messageType", 2);
        //所有在线用户
        ("onlineUsers", );
        //下线用户的用户名
        ("username", );
        //返回在线人数
        ("number", userNumber);
        //发送信息，所有人，通知谁下线了
        sendMessageAll((map1),);

        //通知修改用户列表
        // 更新在线人数(给所有人)
        Map<String, Object> map2 = new HashMap();
        //获得所有的用户
        Set<String> userLists = new TreeSet<>();
        for (WebSocket webSocket : webSocketSet) {
            ();
        }
        //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
        ("messageType", 3);
        //把所有用户放入map2
        ("onlineUsers", userLists);
        //返回在线人数
        ("number", );
        // 消息发送指定人（所有的在线用户信息）
        sendMessageAll((map2),);
        ("【websocket消息】连接断开, 总数:{}", ());
    }

        新增部分代码如下：