铁汁！一起整一个Websocket ｜ Java Debug 笔记

本文正在参加「Java主题月 - Java Debug笔记活动」，详情查看活动链接

一 Websocket概念

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

二 实现

1. 首先我创建了一个springboot项目

2. 先写一个配置类 WebSocketConfig

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

3. 写一个websocket服务类

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

    /**
     *  与某个客户端的连接对话，需要通过它来给客户端发送消息
     */
    private Session session;
   
    /**
     *  用于存所有的连接服务的客户端，这个对象存储是安全的
     */
    private static ConcurrentHashMap webSocketSet = new ConcurrentHashMap<>();
   
    @OnOpen
    public void OnOpen(Session session, @PathParam(value = "name") String name){
        this.session = session;
        webSocketSet.put(name,this);
        log.info("[WebSocket] 连接成功，当前连接人数为：={}",webSocketSet.size());
    }
   
    @OnClose
    public void OnClose(){
        webSocketSet.remove(this);
        log.info("[WebSocket] 退出成功，当前连接人数为：={}",webSocketSet.size());
    }
   
    @OnMessage
    public void OnMessage(String message){
        log.info("[WebSocket] 收到消息：{}",message);
        if(message.indexOf("TOUSER") == 0){
            String name = message.substring(message.indexOf("TOUSER")+6,message.indexOf(";"));
            AppointSending(name,message.substring(message.indexOf(";")+1,message.length()));
        }else{
            GroupSending(message);
        }
   
    }
   
    /**
     * 群发
     * @param message
     */
    public void GroupSending(String message){
        for (String name : webSocketSet.keySet()){
            try {
                webSocketSet.get(name).session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }
   
    /**
     * 指定发送
     * @param name
     * @param message
     */
    public void AppointSending(String name,String message){
        try {
            webSocketSet.get(name).session.getBasicRemote().sendText(message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    
   

4. 写一个前端js建立长连接和后端交互

    websocket.onerror = function(){
        console.log("连接出错");
    }
   
    $(document).keypress(function(e) {
        // 回车键事件
        if(e.which == 13) {
            sendMessage();
        }
    });
   
    window.onbeforeunload = function () {
        websocket.close(num);
    }
    function sendMessage(){
        var msg = document.getElementById("message");
        websocket.send(msg.value+"---"+num);
   
        var context = ' \n' +
            '                    \n' +
            '                        \n' +
            '                        用户编号:' + num + '\n' +
            '                            \n' +
            '                                \n' +
            '                                    \n' +
            '                                        ' + msg.value + '\n' +
            '                                    \n' +
            '                                \n' +
            '                            \n' +
            '                        \n' +
            '                    \n' +
            '                ';
        if (msg.value != "") {
            var html = document.getElementById("chatContent").innerHTML;
            document.getElementById("chatContent").innerHTML = html + context;
   
            //清空文本框
            msg.value = "";
        }
    }
   
    function setMessage(message,num) {
        // message = '客服忙，请稍后处理'
        var context = ' \n' +
            '                    \n' +
            '                        \n' +
            '                        用户编号:'+num+'\n' +
            '                            \n' +
            '                                \n' +
            '                                    \n' +
            '                                        ' + message + '\n' +
            '                                    \n' +
            '                                \n' +
            '                            \n' +
            '                        \n' +
            '                    \n' +
            '                ';
   
        var html = document.getElementById("chatContent").innerHTML;
        document.getElementById("chatContent").innerHTML = html + context;
    }" _ue_custom_node_="true">
   

5 这样一个websocket就建立成功了。