springboot 整合 websocket实现在线聊天和消息通知

骑猪看日落 2023-02-22 13:55 266阅读 0赞

## 一、内容一览 ##

本文由下文改进而来:[https://blog.csdn.net/qq\_41463655/article/details/92410518][https_blog.csdn.net_qq_41463655_article_details_92410518]

适合做简易聊天室，多聊天室，发送接收消息可添加分组id  
适合做及时消息通知

#### 聊天页面，比较简陋 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70]

另外提供 WebSocketController web接口

#### API一览 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70 1]

#### 发送消息/通知接口API ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70 2]

#### 代码结构 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70 3]

## 二、代码部分 ##

#### 1、添加maven 依赖 ####

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>

#### 2、dto 创建 SendMsgDTO ####

package com.ws.ldy.common.websocket.model.dto;
    
    import com.ws.ldy.base.convert.Convert;
    import lombok.Data;
    
    
    /***
     * TODO  websocket客服端-发送消息-入参参数
     * @author 王松
     * @mail 1720696548@qq.com
     * @date 2020/6/30 0030 18:24
     */
    @Data
    public class SendMsgDTO extends Convert {
        /**
         * 接收人用户Id (目标ID,逗号分隔) (所有人使用-ALL)
         */
        private String to;
        /**
         * 发送内容
         */
        private String content;
    
        /**
         * @param to      接收人用户Id (目标ID,逗号分隔) (所有人使用-ALL)
         * @param content 发送内容
         */
        public SendMsgDTO(String to, String content) {
            this.to = to;
            this.content = content;
        }
    
        public SendMsgDTO() {
        }
    }

#### 3、entity/ 创建 OnlineUser ####

package com.ws.ldy.common.websocket.model.entity;
    
    import com.ws.ldy.base.convert.Convert;
    import com.ws.ldy.common.utils.LocalDateTimeUtils;
    import lombok.AllArgsConstructor;
    import lombok.Data;
    
    import javax.websocket.Session;
    import java.time.LocalDateTime;
    
    /***
     * TODO  当前在线列表信息
     * @author 王松
     * @mail 1720696548@qq.com
     * @date 2020/7/1 0001 11:58 
     */
    @Data
    @AllArgsConstructor
    public class OnlineUser extends Convert {
        /**
         * 用户ID
         */
        private String userId;
        /**
         * 用户名称
         */
        private String username;
        /**
         * 用户会话 (使用该对象进行消息发送)
         */
        private Session session;
        /**
         * 连接时间
         */
        private String createTime;
    
        /**
         * @param userId   用户id
         * @param username 用户名称
         * @param session  用户session 回话信息
         */
        public OnlineUser(String userId, String username, Session session) {
            this.userId = userId;
            this.username = username;
            this.session = session;
            this.createTime = LocalDateTimeUtils.parse(LocalDateTime.now());
        }
    }

#### 4、vo/ 创建 OnlineUserVO ####

package com.ws.ldy.common.websocket.model.vo;
    
    import com.ws.ldy.base.convert.Convert;
    import lombok.Data;
    
    /**
     * TODO  在线列表信息返回
     */
    @Data
    public class OnlineUserVO extends Convert {
    
        /**
         * 用户ID
         */
        private String userId;
        /**
         * 用户名称
         */
        private String username;
        /**
         * 连接时间
         */
        private String createTime;
    }

#### 5、vo/ 创建 SendMsgVO （发送消息的所有内容） ####

package com.ws.ldy.common.websocket.model.vo;
    
    import com.ws.ldy.base.convert.Convert;
    import com.ws.ldy.common.websocket.service.impl.WebsocketServiceImpl;
    import com.ws.ldy.common.utils.LocalDateTimeUtils;
    import lombok.Data;
    
    import java.time.LocalDateTime;
    
    
    /**
     * TODO  websocket客户端-接收端-返回参数
     *
     * @author 王松
     * @mail 1720696548@qq.com
     * @date 2020/6/30 0030 18:24
     */
    @Data
    public class SendMsgVO extends Convert {
        /**
         * 消息类型(1-上线通知 2-下线通知 3-在线名单通知  4-代表普通消息通知 )
         */
        private Integer mesType;
        /**
         * 发送人用户Id(来源Id,上线为上线线人的用户Id)
         */
        private String from;
        /**
         * 发送人用户名( 上下线为上线线人的用户名)
         */
        private String username;
        /**
         * 接收人用户Id (目标ID,逗号分隔) (所有人使用-ALL,包括自己在内也能接收)
         */
        private String to;
        /**
         * 发送内容
         */
        private String content;
        /**
         * 扩展消息字段(json)
         */
        private String extras;
        /**
         * 当前在线人数
         */
        private Integer onlineNum;
        /**
         * 消息创建时间(YYYY-MM-DD )
         */
        private String createTime;
    
    //    /**
    //     * 消息类型，int类型(0:text、1:image、2:voice、3:vedio、4:music、5:news)
    //     */
    //    private Integer msgType;
    
    
        /**
         * @param mesType  消息类型(1-上线通知 2-下线通知 3-在线名单通知  4-代表普通消息通知 )
         * @param from     发送人Id(来源Id),上下线为上线人的用户id
         * @param username 发送人姓名username，上下线为上线人的用户名
         * @param to       接收人Id(目标ID,逗号分隔,所有人使用-ALL)
         * @param content  发送消息内容
         * @param extras   发送消息扩展字段
         */
        public SendMsgVO(Integer mesType, String from, String username, String to, String content, String extras) {
            this.mesType = mesType;
            this.from = from;
            this.username = username;
            this.to = to;
            this.content = content;
            this.extras = extras;
            this.onlineNum = WebsocketServiceImpl.onlineNumber.intValue();
            this.createTime = LocalDateTimeUtils.parse(LocalDateTime.now());
        }
    }

#### 6、WebsocketService 接口 ####

package com.ws.ldy.common.websocket.service;
    
    import com.ws.ldy.common.websocket.model.vo.OnlineUserVO;
    
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import java.util.List;
    
    /**
     * TODO websocket 监听类(连接，断点，消息发送等)
     * <p>
     * /websocket/{userId}/{username}   =  /websocket/用户Id/用户名 来连接websocket，该参数会带到每一个监听方法中
     * </P>
     */
    public interface WebsocketService {
    
    
        //================================================================================
        //================================================================================
        //===============================  监听方法 =======================================
        //================================================================================
        //================================================================================
    
        /**
         * TODO  监听连接（有用户连接，立马到来执行这个方法），session 发生变化
         *
         * @param userId   用户id
         * @param username 用户名
         * @param session  当前用户会话
         * @return void
         * @date 2020/6/30 0030 9:28
         */
        public void onOpen(@PathParam("userId") String userId, @PathParam("username") String username, Session session);
    
    
        /**
         * TODO  监听断开连接（有用户退出，会立马到来执行这个方法）
         *
         * @param userId   用户id
         * @param username 用户名
         * @param session  当前用户会话
         */
        public void onClose(@PathParam("userId") String userId, @PathParam("username") String username, Session session);
    
    
        /**
         * TODO 异常停止
         *
         * @param userId   用户id
         * @param username 用户名
         * @param session  当前用户会话
         * @param error    异常信息
         */
        public void onError(@PathParam("userId") String userId, @PathParam("username") String username, Session session, Throwable error);
    
        /**
         * TODO 监听消息发送（收到客户端的消息立即执行）
         *
         * @param userId   用户id
         * @param username 用户名
         * @param message  传递的消息内容, json数据( to=接收人用户Id  (目标ID,逗号分隔) || content=内容)
         * @param session  当前用户会话
         *
         *                 <p>
         *                 // 前端发送内容格式
         *                 ....
         *                 // 拼接参数
         *                 let message = { "content": content, "to": to };
         *                 // 发送数据
         *                 webSocket.send(JSON.stringify(message));
         *                 ....
         *                 </P>
         */
        public void onMessage(@PathParam("userId") String userId, @PathParam("username") String username, String message, Session session);
    
    
    
        //================================================================================
        //================================================================================
        //=======================  service方法(http接口调用操作) ============================
        //================================================================================
        //================================================================================
    
        /**
         * 获取当前在线人数
         *
         * @return
         */
        public Integer getOnlineCount();
    
    
        /**
         * 获取当前在线用户列表
         *
         * @return
         */
        public List<OnlineUserVO> getOnlineUsersList();
    
        /**
         * 发送消息
         *
         * @param form     发送人id
         * @param username 发送人用户名
         * @param to       接收人id（多个逗号分隔）
         * @param content  发送内容
         * @param extras  扩暂发送内容
         * @return
         */
        public List<OnlineUserVO> send(String form, String username, String to, String content, String extras);
    }

#### 7、WebsocketServiceImpl 接口实现( 重点) ####

package com.ws.ldy.common.websocket.service.impl;
    
    import com.alibaba.fastjson.JSON;
    import com.ws.ldy.common.utils.JsonUtils;
    import com.ws.ldy.common.websocket.model.dto.SendMsgDTO;
    import com.ws.ldy.common.websocket.model.entity.OnlineUser;
    import com.ws.ldy.common.websocket.model.vo.OnlineUserVO;
    import com.ws.ldy.common.websocket.model.vo.SendMsgVO;
    import com.ws.ldy.common.websocket.service.WebsocketService;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.stereotype.Service;
    
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    import java.util.Set;
    import java.util.concurrent.ConcurrentHashMap;
    import java.util.concurrent.atomic.AtomicInteger;
    
    /**
     * TODO websocket 监听类(连接，断点，消息发送等)
     * <p>
     * /websocket/{userId}/{username}   =  /websocket/用户Id/用户名 来连接websocket，该参数会带到每一个监听方法中
     * </P>
     *
     * @ServerEndpoint: socket链接地址
     */
    @ServerEndpoint("/websocket/{userId}/{username}")
    @Service
    @Slf4j
    public class WebsocketServiceImpl implements WebsocketService {
        /**
         * 在线人数  //使用原子类AtomicInteger, --->  static并发会产生线程安全问题，    //public  static Integer onlineNumber = 0;
         */
        public static AtomicInteger onlineNumber = new AtomicInteger(0);
        /**
         * 所有用户信息(session + userId + username + createTime  --> 以用户的id为key, 通过用户key来获取用户session进行消息发送)
         */
        public static Map<String, OnlineUser> clients = new ConcurrentHashMap<>();
    
        //================================================================================
        //================================================================================
        //===============================  监听方法 =======================================
        //================================================================================
        //================================================================================
    
        /**
         * TODO  监听连接（有用户连接，立马到来执行这个方法），session 发生变化
         */
        @OnOpen
        public void onOpen(@PathParam("userId") String userId, @PathParam("username") String username, Session session) {
            // 自增1
            onlineNumber.getAndIncrement();
            // 保存新用户id,用户名,session会话,登录时间
            clients.put(userId, new OnlineUser(userId, username, session));
    
            // 告诉所有人,我上线了
            String content = "系统消息:" + username + " 上线了";
            this.send(new SendMsgVO(1, userId, username, "ALL", content, null));
    
            // 给自己发一条消息：告诉自己现在都有谁在线
            this.send(new SendMsgVO(3, userId, username, userId, JSON.toJSONString(getOnlineUsers()), null));
            log.info("有新连接加入！sessionId：{} userId：{} userName：{} 当前在线人数:{}", session.getId(), userId, username, onlineNumber);
        }
    
    
        /**
         * TODO  监听断开连接（有用户退出，会立马到来执行这个方法）
         */
        @OnClose
        public void onClose(@PathParam("userId") String userId, @PathParam("username") String username, Session session) {
            // 自减1
            onlineNumber.getAndDecrement();
            // 所有在线用户中去除下线用户
            clients.remove(userId);
            // 告诉所有人,我下线了
            String content = "系统消息:" + username + " 下线了";
            this.send(new SendMsgVO(2, userId, username, "ALL", content, null));
            // 日志
            log.info(username + ":已离线！ 当前在线人数" + onlineNumber);
        }
    
        /**
         * TODO 异常停止
         */
        @OnError
        public void onError(@PathParam("userId") String userId, @PathParam("username") String username, Session session, Throwable error) {
            error.printStackTrace();
            log.info("服务端发生了错误" + error.getMessage());
        }
    
        /**
         * TODO 监听消息发送（收到客户端的消息立即执行）
         */
        @OnMessage
        public void onMessage(@PathParam("userId") String userId, @PathParam("username") String username, String message, Session session) {
            log.info("服务器接收到发送消息请求,发送人id={},用户名={}, 接收发送消息={}", userId, username, message);
            // 请求参数（接收人+发送内容）
            SendMsgDTO sendMsgDTO = JsonUtils.parseEntity(message, SendMsgDTO.class);
            // 发送消息
            this.send(new SendMsgVO(4, userId, username, sendMsgDTO.getTo(), sendMsgDTO.getContent(), null));
        }
    
    
        /**
         * 消息发送（ 遍历用户Id , 在通过sendMsg方法发送消息）
         *
         * @param sendMsg：消息内容
         */
        private void send(SendMsgVO sendMsg) {
            if ("ALL".equals(sendMsg.getTo()) || "all".equals(sendMsg.getTo())) {
                // 发送消息给所有人
                Set<String> userIds = clients.keySet();
                for (String userId : userIds) {
                    this.sendMsg(userId, sendMsg);
                }
            } else {
                //发送消息给指定人
                String[] userIds = sendMsg.getTo().split(",");
                for (String userId : userIds) {
                    this.sendMsg(userId, sendMsg);
                }
            }
        }
    
    
        /**
         * 消息发送(最后发送, 在send方法中循环用户Id 列表依次发送消息给指定人)
         * <p>
         * // 消息发送（同步:getBasicRemote 异步:getAsyncRemote）
         * </P>
         *
         * @param userId  消息接收人ID , onlineUsers 的 key
         * @param sendMsg 消息内容
         */
        private void sendMsg(String userId, SendMsgVO sendMsg) {
            // 判断用户是否在线, 在线发送消息推送
            if (clients.containsKey(userId)) {
                try {
                    clients.get(userId).getSession().getBasicRemote().sendText(JSON.toJSONString(sendMsg));
                } catch (IOException e) {
                    e.printStackTrace();
                    log.info(userId, sendMsg.getUsername() + "上线的时候通知所有人发生了错误");
                }
            }
        }
    
        /**
         * 获取当前在线列表
         * <p>
         * 获取当前在线列表, 把onlineUsers 转到 OnlineUsersVO返回
         * </p>
         *
         * @return
         */
        public synchronized List<OnlineUserVO> getOnlineUsers() {
            List<OnlineUserVO> onlineUsersVOList = new ArrayList<>();
            for (OnlineUser onlineUsers : clients.values()) {
                onlineUsersVOList.add(onlineUsers.convert(OnlineUserVO.class));
            }
            return onlineUsersVOList;
        }
    
    
        //================================================================================
        //================================================================================
        //=======================  service方法(http接口调用操作) ============================
        //================================================================================
        //================================================================================
    
    
        /**
         * 获取当前在线人数
         *
         * @return
         */
        public Integer getOnlineCount() {
            return onlineNumber.get();
        }
    
    
        /**
         * 获取当前在线用户信息
         *
         * @return
         */
        public List<OnlineUserVO> getOnlineUsersList() {
            return getOnlineUsers();
        }
    
        /**
         * 发送消息 (单向通知发送，不可回复)
         *
         * @param form     发送人id
         * @param username 发送人用户名
         * @param to       接收人id（多个逗号分隔）
         * @param content  发送内容
         * @param content  发送内容
         * @param content  扩暂发送内容
         * @return
         */
        public List<OnlineUserVO> send(String form, String username, String to, String content, String extras) {
            // 发送消息
            this.send(new SendMsgVO(4, form, username, to, content, extras));
            return getOnlineUsers();
        }
    }

#### 8、WebsocketController web-Api 接口方法 ####

package com.ws.ldy.base.controller;
    
    import com.ws.ldy.common.result.Result;
    import com.ws.ldy.common.result.ResultEnum;
    import com.ws.ldy.common.websocket.model.vo.OnlineUserVO;
    import com.ws.ldy.common.websocket.service.WebsocketService;
    import com.ws.ldy.config.error.ErrorException;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiImplicitParam;
    import io.swagger.annotations.ApiImplicitParams;
    import io.swagger.annotations.ApiOperation;
    import lombok.extern.slf4j.Slf4j;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * websocket类
     *
     * @ServerEndpoint: socket链接地址
     */
    @Api(value = "WebSocketController", tags = "websocket 相关通知/聊天")
    @RequestMapping("/websocket")
    @RestController
    @Slf4j
    public class WebSocketController {
    
        /**
         * websocket ip 或域名
         */
        @Value("${websocket.ip}")
        private String ip;
    
        /**
         * websocket 端口号
         */
        @Value("${websocket.port}")
        private String port;
    
        /**
         * websocket接口
         */
        @Value("${websocket.interfaceName}")
        private String interfaceName;
    
    
        /**
         * TODO 获取webSocket  连接地址,  // 实际情况根据用户 token获取用户信息返回
         * 获取socket地址
         * 获取用户名
         * 获取用户Id
         */
        @RequestMapping(value = "/getPath", method = RequestMethod.GET)
        @ApiOperation("游客登录获取websocket连接地址")
        public Result<Map<String, String>> getPath() {
            // 配置检查
            if (StringUtils.isBlank(ip) || StringUtils.isBlank(port) || StringUtils.isBlank(interfaceName)) {
                throw new ErrorException(ResultEnum.SYS_SOCKET_CONFIG_ERROR);
            }
            // 随机用户名
            String username = "游客:" + new SimpleDateFormat("ssSSS").format(new Date());
            // 随机用户id
            String userId = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
    
            // 连接地址， // "ws://192.168.0.154:9049/websocket/1/张三"
            String path = "ws://" + ip + ":" + port + interfaceName + "/" + userId + "/" + username;
            log.info("websocket请求地址:" + path);
    
            //返回参数
            Map<String, String> map = new HashMap<>();
            map.put("path", path);
            map.put("userId", userId);
            map.put("username", username);
            return Result.success(map);
        }
    
        // websocket 逻辑代码
        @Autowired
        private WebsocketService websocketService;
    
        /**
         * TODO 发送消息
         */
        @RequestMapping(value = "/send", method = RequestMethod.POST)
        @ApiOperation("发送消息")
        @ApiImplicitParams({
                @ApiImplicitParam(name = "form", value = "发送人Id", required = true),
                @ApiImplicitParam(name = "username", value = "发送人用户名", required = true),
                @ApiImplicitParam(name = "to", value = "接收人Id, 全部为ALL", required = true),
                @ApiImplicitParam(name = "content", value = "发送内容", required = true),
                @ApiImplicitParam(name = "extras", value = "附加发送内容", required = true)
        })
        public Result<Void> send(String form, String username, String to, String content, String extras) {
            websocketService.send(form, username, to, content, extras);
            return Result.success();
        }
    
        /**
         * TODO 获取当前在线人数
         */
        @RequestMapping(value = "/getOnlineCount", method = RequestMethod.GET)
        @ApiOperation("发送消息")
        public Result<Integer> getOnlineCount() {
            Integer onlineCount = websocketService.getOnlineCount();
            return Result.success(onlineCount);
        }
    
    
        @RequestMapping(value = "/getOnlineUsersList", method = RequestMethod.GET)
        @ApiOperation("获取当前在线用户列表")
        public Result<List<OnlineUserVO>> getOnlineUsersList() {
            return Result.success(websocketService.getOnlineUsersList());
        }
    }

#### 9、yml 创建websocket配置 ####

## websocket 配置
    websocket:
      # websocket 服务器部署地址的ip或者域名 --> 本地可以使用127.0.0.1 || localhost
      ip: 127.0.0.1
      # websocket 服务器端口,获取当前服务器端口
      port: ${server.port}
      # websocket 连接接口， WebsocketServiceImpl的 @ServerEndpoint 内参数
      interfaceName: /websocket

#### 10、最后别忘了 WebSocketConfig 配置 ####

/**
      * TODO  WebSocket 配置类
      * @author 王松
      * @mail  1720696548@qq.com
      * @date  2020/6/30 0030 9:26
      */
    @Configuration
    public class WebSocketConfig {
    
        /**
         * 服务器节点
         * <p>
         * 如果使用独立的servlet容器，而不是直接使用springboot的内置容器，就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理
         *
         * @return
         */
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
            return new ServerEndpointExporter();
        }
    }

#### 11、前端页面html ####

<!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
        <title>websocket</title>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
        <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
        <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
        <script th:src="@{/js/app.js}"></script>
    </head>
    <css>
    
    </css>
    <style>
        /* overflow-y :auto;overflow :auto;  宽高自适应滚动条 */
        /* 群聊*/
        .quLiao {
            width: 80%;
            height: 300px;
            background-color: papayawhip;
            float: left;
            overflow-y: auto;
            overflow: auto;
        }
    
        /* 私聊*/
        .siLiao {
            width: 80%;
            height: 300px;
            background-color: papayawhip;
            float: left;
            overflow-y: auto;
            overflow: auto;
        }
    
        /*在线列表*/
        .zxList {
            width: 20%;
            background-color: #F2F2F2;
            float: left;
            overflow-y: auto;
            overflow: auto;
        }
    </style>
    <body>
    <br>
    
    
    <span class="quLiao" id="quLiao">
        <li style="text-align: center">群聊信息</li> 
    </span>
    
    
    <span class="zxList" id="zxList">
        <li style="text-align: center">在线列表</li>
    </span>
    
    
    
    <textarea id="text" placeholder="请输入内容-发送消息[Ctrl+回车键]" rows="3%" cols="60%"></textarea>
    <td>消息发送至:</td>
    <select id="to" size="1" style="width: 10%;height:30px">
        <option value="ALL">所有人</option> 
    </select>
    <input onclick="send()" type="button" value="发送">
    
    <div class="siLiao" id="siLiao">
        <li style="text-align: center">私聊信息</li>  
    </div>
    <br>
    <br>
    
    
    
    </body>
    <script type="text/javascript">
    
        // 获取socket连接地址，连接地址url中自带登录用户的账号信息,前端无需关心
        let JsonData = ajaxGet(path + "/websocket/getPath");
        //
        let socketPath = JsonData.data.path;   //连接地址
        let formUserId = JsonData.data.userId;     //用户Id
        let formUsername = JsonData.data.username; //用户名
    
        let zxList = $("#zxList");  //在线列表
        let quLiao = $("#quLiao");  //群聊
        let siLiao = $("#siLiao");  //私聊
        let toList = $("#to");      //消息接收人select选择框
    
        let webSocket;
        // var commWebSocket;
        http:
            if ("WebSocket" in window) {
    
                // 连接地址：后端获取
                websocket = new WebSocket(socketPath);   // 如: "ws://192.168.0.154:9049/websocket/张三/1"
    
                // 连通成功的监听
                websocket.onopen = function () {
                    quLiao.html(quLiao.html() + " <li style='text-align: center'>系统消息:[登陆成功]</li>")
                };
    
                // 接收后台服务端的消息监听
                websocket.onmessage = function (evt) {
                    let received_msg = evt.data;           // 接收到的数据
                    let obj = JSON.parse(received_msg);    // json数据
                    let mesType = obj.mesType;             // 数据类型（1上线/2下线/3在线名单/4发信息)
                    let from = obj.from;                   // 来源Id，上下线时为上下线的用户id
                    let username = obj.username;           // 来源用户，上下线时为上下线的用户名
                    let to = obj.to;                       // 目标Id（接收人用户Id,逗号分隔，所有人时为-ALL)）
                    let content = obj.content;             // 内容
                    let extras = obj.extras;               // 扩展内容(json)
                    let onlineNum = obj.onlineNum;         // 在线人数
                    let createTime = obj.createTime;       // 消息时间
                    //alert(JSON.stringify(received_msg));
    
                    // 上线通知+在线列表刷新
                    if (mesType === 1) {
                        // 群聊信息时上线
                        quLiao.html(quLiao.html() + " <li style='text-align: center;color: #00FF00'>" + content + " </li>");
                        // 在线列表（id=用户id，用于下线删除）
                        zxList.html(zxList.html() + " <li id='" + from + "' style='text-align: left'>---" + username + "    " + createTime + "</li>");
                        // 在线人选择框（optionId为了下线通知移除）
                        toList.html(toList.html() + "<option id='option" + from + "' value='" + from + "'>" + username + "</option> ")
                    }
    
                    // 下线通知+在线列表刷新
                    else if (mesType === 2) {
                        // 群聊信息暂时下线
                        quLiao.html(quLiao.html() + " <li style='text-align: center;color: red'>" + content + " </li>");
                        // 在线列表删除下线人
                        $("#" + from).remove();
                        // 在线人选择框移除下线人
                        $("#option" + from).remove();
                    }
    
                    // 在线列表通知（自己登录时给自己发送）
                    else if (mesType === 3) {
                        zxList.html("");
                        toList.html("<option value='ALL'>所有人</option>");
                        //
                        let userList = JSON.parse(content);
                        for (let i = 0; i < userList.length; i++) {
                            let userId = userList[i].userId;         // 用户id
                            let username = userList[i].username;     // 用户名
                            let createTime = userList[i].createTime; // 用户登录时间
                            // alert(userList[i].username)
                            if (userId !== from || userId !== formUserId) {
                                // 在线列表（id=用户id，用于下线删除）
                                zxList.html(zxList.html() + " <li id='" + userId + "' style='text-align: left'>---" + username + "    " + createTime + "</li>");
                                // 在线人选择框（optionId为了下线通知移除） --》 不展示自己
                                toList.html(toList.html() + "<option id='option" + userId + "' value='" + userId + "'>" + username + "</option> ")
                            } else {
                                // 在线列表（id=用户id，用于下线删除）
                                zxList.html(zxList.html() + " <li id='" + userId + "' style='text-align: left'>---" + username + " (自己)    " + createTime + "</li>");
    
                            }
                        }
                    }
    
                    // 信息接收通知
                    else if (mesType === 4) {
                        if (to === "ALL") {
                            // 群聊
                            // 判断是否为自己的消息，（自己 ==> 发送方=接收方 || 发送方是自己）
                            if (to === from || formUserId === from) {
                                //自己右边展示
                                quLiao.html(quLiao.html() + " <li style='text-align: right;'>" + content + " <--" + username + " </li>");
                            } else {
                                //左边展示
                                quLiao.html(quLiao.html() + " <li style='text-align: left;'>" + username + "--> " + content + " </li>");
                            }
                        } else {
                            // 私聊
                            // 判断是否为自己的消息，（自己 ==> 发送方=接收方 || 发送方是自己）
                            if (to === from || formUserId === from) {
                                //自己右边展示
                                siLiao.html(siLiao.html() + " <li style='text-align: right;'>" + content + " <--" + username + " </li>");
                            } else {
                                //左边展示
                                siLiao.html(siLiao.html() + " <li style='text-align: left;'>" + username + "--> " + content + " </li>");
                            }
                        }
    
                    }
                };
    
                // 连接关闭的回调事件
                websocket.onclose = function () {
                    console.log("连接已关闭...");
                    document.getElementById('message').innerHTML += '连接已经关闭....' + '<br/>';
                };
    
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
    
    
        /**
         * TODO 关闭websocket 连接 --> 关闭窗口也会自动断开连接
         */
        function closeWebSocket() {
            //直接关闭websocket的连接
            websocket.close();
        }
    
    
        /**
         * TODO 按下Ctrl + 回车 发送消息
         */
        $(document).keyup(function (event) {
            //浏览器适应
            if (event.ctrlKey && event.which == 13 || event.which == 10) {
                send();
            } else if (event.shiftKey && event.which == 13 || event.which == 10) {
                send();
            }
        });
    
    
        /**
         * TODO 点击发送按钮发送消息
         */
        function send() {
            let to = $("#to").val();                  // 接收数据人id
            let content = $("#text").val();           // 发送的数据
    
            // 发送给指定人时，给自己也推送一个消息
            if (to !== "ALL") {
                to = to + "," + formUserId;
            }
            // 参数拼接
            let message = {
                "content": content,
                "to": to
            };
            //发送数据
            websocket.send(JSON.stringify(message));
            $("#text").val("");
        }
    </script>
    </html>

重点还是在与html 的js中获取到参数如何处理参数，以及发送消息处理，到此可以先线上完成websocket 聊天功能了，  
以及直接使用web-api 接口获取到在线人数， 直接所有发送消息Api 接口向聊天室发送任意消息

***本文到此结束，如果觉得有用，动动小手点赞或关注一下呗，将不定时持续更新更多的内容…，感谢大家的观看！***

[https_blog.csdn.net_qq_41463655_article_details_92410518]: https://blog.csdn.net/qq_41463655/article/details/92410518
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200704114902505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200704140416286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200704140447963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020070411454974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDYzNjU1,size_16,color_FFFFFF,t_70