【十七】springboot整合WebSocket实现聊天室（超详细）

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

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

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

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

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

package com.swagger.demo.config;

import com.alibaba.fastjson.JSON;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
import java.util.concurrent.CopyOnWriteArraySet;


//注册成组件
@Component
//定义websocket服务器端，它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址
@ServerEndpoint("/websocket/{username}")
//如果不想每次都写private  final Logger logger = LoggerFactory.getLogger(当前类名.class); 可以用注解@Slf4j;可以直接调用log.info
@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 webSocketSet = new CopyOnWriteArraySet<>();

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

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

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

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

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

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

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

    
    public void sendMessageTo(String message, String ToUserName) throws IOException {
        //遍历所有用户
        for (WebSocket webSocket : webSocketSet) {
            if (webSocket.userName.equals(ToUserName)) {
                //消息发送指定人
                webSocket.session.getBasicRemote().sendText(message);
                log.info("【发送消息】:", this.userName+"向"+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方法是接受前端传来数据时触发。

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

获取message里面的键值对数据

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

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

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

    
	
	
	
	
	

 

	聊天室
    
		
		
			在线用户列表：
			


			
		
		
			
		
    
	
	    
		发送
		清屏
	

 

下面介绍各部分代码：

1、html代码

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

2、js代码

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

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

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

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

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

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

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

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

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

到此，整合完毕。

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

客户端访问地址：http://localhost:8090/swagger-ui.html或者http://localhost:8090/doc.html

demo地址：studydemo/整合swagger at main · zrc11/studydemo · GitHub

修改（2021/10/9）

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

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

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

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

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

新增部分代码如下：