【十五】springboot整合WebSocket实现聊天室-阿里云开发者社区

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

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

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

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

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

后端相比上一章没有新增文件。只是进行了WebSocket文件的改造，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;
 
/**
 * @ClassName WebSocketConfig
 * @Description TODO
 * @Author zrc
 * @Date 11:01
 * @Version 1.0
 **/
//注册成组件
@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<WebSocket> 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<String> userLists = new TreeSet<>();
        for (WebSocket webSocket : webSocketSet) {
            userLists.add(webSocket.userName);
        }
 
        //将所有信息包装好传到客户端(给所有用户)
        Map<String, Object> 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<String, Object> 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<String, Object> 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<String, Object> 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<String, Object> 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<String, Object> 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对象还需要发送给自己。

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

第二步：创建前端html文件

<!DOCTYPE HTML>
<html>
<head>
    <title>聊天室</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></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" id="userlist" style="width: 200px;margin-top: -18px;margin-left: -32px;">
 
      </ul>
    </div>
    <div id="content" 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" id="message"  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 = "用户"+Math.random()*100;
  
  //定义一个websocket
    var websocket = null;
 
    //判断当前浏览器是否支持WebSocket（固定写法）
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8090/websocket/"+username);
    }else{
        alert('浏览器不支持websocket')
    }
 
    //连接发生错误的回调方法
    websocket.onerror = function(){
        console.log("发生错误");
    };
 
    //连接成功建立的回调方法
    websocket.onopen = function(event){
        console.log("建立连接"+"event");
    }
 
    //接收到消息的回调方法
    websocket.onmessage = function(event){
    var data = JSON.parse(event.data);
    console.log(JSON.parse(event.data))
    
    //更新content的内容（上线）
    if(data.messageType=="1"){
      // console.log("成功")
      $("#content").append(`<span style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;">`+data.username+"上线了"+`</span><br>`);
    }
    //更新content的内容（下线）
    if(data.messageType=="2"){
      // console.log("成功")
      $("#content").append(`<span style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;">`+data.username+"下线了"+`</span><br>`);
    }
    //更新content的内容（更新用户列表）
    if(data.messageType=="3"){
      //先清空
      $("#userlist").html(``);
      var list = data.onlineUsers;
      console.log(list)
      for(var i=0;i<list.length;i++){
        $("#userlist").append(`<li style="cursor:pointer;" class="list-group-item" onclick="friend(this)" values="`+list[i]+`">`+list[i]+`</li>`);
      }
    }
    //更新content的内容（更新用户群发消息）
    if(data.messageType=="4"){
      // console.log(data);
      $("#content").append(`<span style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;">`+data.username+`说:`+data.textMessage+`</span><br>`);
    }
    
  }
 
  //选择用户
  function friend(e){
    console.log(e);
    $("#message").val("@ "+e.innerHTML+" ");
    var data = e.innerHTML;
    console.log(data);
    tousername = data;
  }
 
    //连接关闭的回调方法
    websocket.onclose = function(){
        console.log("关闭连接");
    }
 
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
    alert("已关闭连接");
        websocket.close();
    }
 
  //发送按钮
  $(".fasong").click(function(){
    
    console.log("发送消息")
    var message = $("#message").val();
    //判断是群发还是私发
    console.log(message);
    //获取发送对象
    tousername = message.split(' ')[1];
    //获取发送消息
    tomessage = message.split(' ')[2];
    console.log(tomessage);
    console.log(tousername);
    if(message.indexOf("@")!=-1){
      //私发
      console.log("私发")
      var param = {};
      param['username'] = username;
      param['message'] = tomessage;
      param['type'] = '私发';
      param['tousername'] = tousername;
    }
    else{
      //群发
      console.log("群发")
      var param = {};
      param['username'] = username;
      param['message'] = message;
      param['type'] = '群发';
      param['tousername'] = '';
    }
    //发送消息到后端
    websocket.send(JSON.stringify(param));
  })
  
</script>
</html>

下面介绍各部分代码：

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

修改（2021/10/9）

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

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

 //前端关闭时一个websocket时
    @OnClose
    public void onClose() throws IOException {
        //从集合中移除当前对象
        webSocketSet.remove(this);
        //在线用户数减少
        userNumber--;
 
        //通知下线
        Map<String, Object> 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<String, Object> map2 = new HashMap();
        //获得所有的用户
        Set<String> 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());
    }

新增部分代码如下：

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

第一步：改造WebSocket

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

第二步：创建前端html文件

完毕！

第三步：演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

第一步：改造WebSocket

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

第二步：创建前端html文件

完毕！

第三步：演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景