Spring boot + Websocket

Posted 2021-11-12

1、添加配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
     /**
     * 注入ServerEndpointExporter，
     * 这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

2、添加WebSocket类

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/websocket/{shopId}")
public class WebSocket {
    private static Logger logger = LoggerFactory.getLogger(WebSocket.class);

    private Session session;

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

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "shopId") String shopId) {
        this.session = session;
        webSockets.add(this);
        sessionPool.put(shopId, session);
        logger.info("有新的连接，总数为:{}", webSockets.size());
    }

    @OnClose
    public void onClose() {
        webSockets.remove(this);
        logger.info("连接断开，总数为:{}", webSockets.size());
    }

    @OnMessage
    public void onMessage(String message) {
        logger.info("收到客户端消息:{}", message);
    }

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

    // 此为单点消息
    public void sendOneMessage(String shopId, String message) {
        Session session = sessionPool.get(shopId);
        if (session != null) {
            try {
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                logger.error("", e);
            }
        }
    }

}

3、添加测试类

import com.sgcc.gtfsamservice.componet.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("api")
public class TestController {
    @Autowired
    private WebSocket webSocket;

    @RequestMapping("/sendAllWebSocket")
    public String test() {    
        webSocket.sendAllMessage("hello");
        return "多发！";        
    }

    @RequestMapping("/sendOneWebSocket")
    public String sendOneWebSocket() {
        webSocket.sendOneMessage("channel001", "hello！");
        return "单发";
    }
}

4、前端Vue

export default {
    name: ‘relationship‘,
    data () {
      return {

      }
    },
    created () { // 页面创建生命周期函数
      this.initWebSocket()
    },
    destroyed: function () { // 离开页面生命周期函数
      this.websocketclose()
    },
    methods: {
      initWebSocket: function () {
        // ws等同http，wss等同https,其中ip为后端应用主机，port为后端启动所占用的端口
        this.websock = new WebSocket(‘ws://ip:port/websocket/channel001‘)
        this.websock.onopen = this.websocketonopen
        this.websock.onerror = this.websocketonerror
        this.websock.onmessage = this.websocketonmessage
        this.websock.onclose = this.websocketclose
      },
      websocketonopen: function () {
        console.log(‘WebSocket连接成功‘)
      },
      websocketonerror: function (e) {
        console.log(‘WebSocket连接发生错误‘)
      },
      websocketonmessage: function (e) {
        var da = JSON.parse(e.data)
        console.log(da)
        this.message = da
      },
      websocketclose: function (e) {
        console.log(‘connection closed (‘ + e.code + ‘)‘)
      },