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

简介: 【十五】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());
    }

       新增部分代码如下:


目录
相关文章
|
1天前
|
存储 JavaScript Java
基于 WebSocket 打造聊天室
基于 WebSocket 打造聊天室
|
2天前
|
前端开发 IDE Java
构建一个基于React和Spring Boot的简易聊天室应用
构建一个基于React和Spring Boot的简易聊天室应用
6 0
|
15天前
|
网络协议 Java Spring
Springboot 集成websocket
Springboot 集成websocket
20 0
|
15天前
|
前端开发 JavaScript Java
Springboot+Netty+WebSocket搭建简单的消息通知
这样,你就建立了一个简单的消息通知系统,使用Spring Boot、Netty和WebSocket实现实时消息传递。你可以根据具体需求扩展和改进该系统。
36 1
|
15天前
|
前端开发 Java
【十四】springboot整合WebSocket
【十四】springboot整合WebSocket
63 0
|
1天前
|
JavaScript Java 关系型数据库
springboot+vue在线BLOG网站(源码+文档)
在线BLOG网站实现了以下功能: 管理员:首页、个人中心、个人信息、用户管理、博客标签管理、博客分类管理、博客管理、图库相册管理、论坛管理、系统管理等模块信息的查看及相应操作。 用户:实现个人中心、个人信息、博客管理、图库相册管理、我的收藏等相应操作。
|
1天前
|
数据管理 Java 测试技术
springboot+vue心灵治愈交流平台(源码+文档)
心灵治愈交流平台实现了以下功能: 管理员模块:系统中的核心用户是管理员,管理员登录后,通过管理员来管理后台系统。主要功能有:首页、个人中心、系统公告管理、用户管理、心理咨询师管理、心灵专栏管理、压力测试管理、测试数据管理、咨询师预约管理、小纸条管理、系统管理等功能。 用户:首页、个人中心、测试数据管理、咨询师预约管理、小纸条管理等功能。 心理咨询师:首页、个人中心、咨询师预约管理、系统管理等功能
|
1天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
19 7
|
1天前
|
JavaScript Java 测试技术
基于vue的青少年科普教学系统平台springboot
基于vue的青少年科普教学系统平台springboot
8 2
|
1天前
|
Java 关系型数据库 MySQL
springboot+vue口腔管理平台(源码+文档)
一款基于SpringBoot的口腔管理平台,适用于Java开发者。项目采用Java、SpringBoot、Mybatis等技术栈,支持JDK1.8和MySQL 5.7+数据库。平台包括管理员和会员两个角色,具备个人中心、会员管理、病例就诊信息、牙齿保健产品、预约挂号、药品信息、留言板、系统管理和订单管理等功能。此外,还提供前端界面如首页、个人中心、购物车等。风歌提供项目源码及相关咨询服务,详情可联系作者。