websocket

添加依赖

<dependency>  
    <groupId>org.springframework.boot</groupId>  
    <artifactId>spring-boot-starter-websocket</artifactId>  
</dependency> 
​
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.76</version>
</dependency>

开启WebSocket支持

在config层建立 WebSocketConfig 类

package com.qcby.websocketdemo.config;
​
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
​
/**
 * @ Description: 开启WebSocket支持
 */
@Configuration
public class WebSocketConfig {
​
    // 开启WebSocket支持
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
​
}

WebSocket具体业务

在service层建立 WebSocketService 类

package cc.mrbird.febs.external.webScoket;
​
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;
​
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.time.LocalDateTime;
import java.util.List;
import java.util.concurrent.CopyOnWriteArraySet;
​
@Component
@Service
//  @ServerEndpoint  将目前的类定义成一个 websocket 服务器端
//  注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
@ServerEndpoint("/api/websocket/{sid}")
public class WebSocketServer {
    //存放每个客户端对应的MyWebSocket对象  id对象
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    //用户信息
    private Session session;
    //接收sid
    private String sid = "";
    //当前在线连接数
    private static int onlineCount = 0;
​
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        this.sid = sid;
        addOnlineCount();           //在线数加1
        try {
            sendMessage("conn_success");
            log.info("有新窗口开始监听:" + sid + ",当前在线人数为:" + getOnlineCount());
        } catch (IOException e) {
            log.error("websocket IO Exception");
        }
    }
    
     /**
     * 实现服务器主动推送
     */
    //  前端会根据websocket.onmessage = function(event) {}  来接收这里传出的数据
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
    
    /**
     * 收到客户端消息后调用的方法
     * @ Param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到来自窗口" + sid + "的信息:" + message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
​
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
       
        log.info("释放的sid为："+sid);
        
        log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
​
    }
​
    /**
     * @ Param session
     * @ Param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }
​
    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message, @PathParam("sid") String sid) throws IOException {
        log.info("推送消息到窗口" + sid + "，推送内容:" + message);
​
        for (WebSocketServer item : webSocketSet) {
            try {
                //为null则全部推送
                if (sid == null) {
//                    item.sendMessage(message);
                } else if (item.sid.equals(sid)) {
                    item.sendMessage(message);
                }
            } catch (IOException e) {
                continue;
            }
        }
    }
​
    public static synchronized int getOnlineCount() {
        return onlineCount;
    }
​
    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }
​
    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
​
    public static CopyOnWriteArraySet<WebSocketServer> getWebSocketSet() {
        return webSocketSet;
    }
}

前端代码

先写接收消息websocket.onmessage 再写发送消息send()

<!DOCTYPE html>
<html>
​
 <head>
  <meta charset="utf-8">
  <title>Java 后端 WebSocket 的 Tomcat 实现</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
 </head>
​
 <body>
      <div id="main" style="width: 1200px;height:800px;"></div>
      Welcome<br/><input id="text" type="text" />
      <button onclick="send()">发送消息</button>
      <hr/>
      <button onclick="closeWebSocket()">关闭WebSocket连接</button>
      <hr/>
      <div id="message"></div>
 </body>
 <script type="text/javascript">
      var websocket = null;
      
      // 生成用户的uuid
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
      });
      // 将用户id传给后端集中保存
      websocket = new WebSocket('ws://localhost:8080/api/websocket/' + uuid);
   
      // 接收后端 sendMessage方法 传来的json数据
      websocket.onmessage = function(event) {
          const data = JSON.parse(event.data);
          //  在前端展示后端传来的数据  j
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
   
      //发送消息
      function send() {
          // 获取输入框中信息
          var message = document.getElementById('text').value;
          // send方法会直接将信息带到有 @OnMessage 标签的方法中
          websocket.send(JSON.stringify({type: 'user', message: message}));
          // 将用户自己发送的信息在自己的前端展示
          innerHTML = message
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
        //$('#messages').append('<div style="text-align: right">' + message + '</div>')
        //$('#message-input').val('')
      }
​
      //连接成功建立回调方法
      websocket.onopen = function() {
          setMessageInnerHTML("WebSocket连接成功");
      }
      
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML) {
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
      
      
​
      //连接发生错误回调方法
      websocket.onerror = function() {
       setMessageInnerHTML("WebSocket连接发生错误");
      };
      //连接关闭回调方法
      websocket.onclose = function() {
       setMessageInnerHTML("WebSocket连接关闭");
      }
      //监听窗口关闭事件
      window.onbeforeunload = function() {
       closeWebSocket();
      }
      //关闭WebSocket连接
      function closeWebSocket() {
       websocket.close();
      }
 </script>
​
</html>