webSocket信息推送 实现客服聊天功能 群发和点对点

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

客服系统开发需要用到点对点聊天，如果是不断访问接口的形式获取数据，性能消耗大
用WebSocket通信技术，这样的话只需要连接一次，信息即可互相推送

解决思路

1.当用户或者客服进入聊天界面时，发起ws请求
“ws://127.0.0.1:8888/websocket/”+id
id为唯一标识符，辨别连接用户

2.发送信息 根据id发送信息

3.接收信息 前端接收信息包含接收人id，如果接收人是当前聊天对话框的用户，就把数据渲染到对话框里

步骤
1.引入pox

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

<dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
 </dependency>

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }


}

@Component
@ServerEndpoint("/websocket/{id}")
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();
    private static Map<String, Session> sessionPool = new HashMap<String, Session>();

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "id") String id) {
        this.session = session;
        webSockets.add(this);
        sessionPool.put(id, session);
        System.out.println(id + "【websocket消息】有新的连接，总数为:" + webSockets.size());
    }

    @OnClose
    public void onClose() {
        webSockets.remove(this);
        System.out.println("【websocket消息】连接断开，总数为:" + webSockets.size());
    }

    @OnMessage
    public void onMessage(String message) {
        System.out.println("【websocket消息】收到客户端消息:" + message);
    }

    public void sendAllMessage(String message) {
        for (WebSocket webSocket : webSockets) {
            System.out.println("【websocket消息】广播消息:" + message);
            try {
                webSocket.session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    public void sendOneMessage(String id, String message) {
        System.out.println("【websocket消息】单点消息:" + message);
        Session session = sessionPool.get(id);
        if (session != null) {
            try {
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

}

发送

  String msg="";
        String todeuser=""+touser;
        System.out.println("todeuser"+todeuser);
        JSONObject json;

        //1.将Bean转换为Json格式
        json = JSONObject.fromObject(chatVo);

        //2.将Json格式转换为String类型
        msg = json.toString();
        System.out.println("Bean转换为Json：" + msg);
        webSocket.sendOneMessage(todeuser,msg);

chatVo

package com.gdkm.vo;

import lombok.Data;

@Data
public class ChatVo {
    /**
     * 发送者
     */
    private Integer userId;
    /**
     * id
     */
    private Integer cId;
    /**
     * 头像
     */
    private String userIocn;
    /**
     * 内容
     */
    private String cltext;
    /**
     * 时间
     */
    private Data createtime;
    /**
     * 0是未读
     */
    private String clstate;
    /**
     * 0是自己  1是对方
     */
    private String tpye;
}

我的前端页面

<template>

    <div class="chat">

        <el-card class="box-card box-cards">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>在线客服</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>

        <div class="box-card box-cards">
            <el-row class="con">
                <el-col :span="24">
                   <div class="righthead">
                       <h4>{
  {userNickname}}</h4>
                   </div>