一、后端代码

1.导入websocket依赖

        <!-- WebSocket依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

2.编写websocketConfig配置类

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

@Component
public class WebSocketConfig {

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

}

3.websocket的实现类

import lombok.extern.slf4j.Slf4j;
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.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/webSocket")
@Component
@Slf4j
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    @OnOpen
    public void opOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        log.info("【websocket消息】 有新的连接 总数：{}",webSocketSet.size());
    }

    @OnClose
    public void onClose(Session session){
        this.session = session;
        webSocketSet.remove(this);
        log.info("【websocket消息】 连接断开 总数：{}",webSocketSet.size());
    }

    @OnMessage
    public void onMessage(String message){
        log.info("【websocket消息】 收到客户端发来的消息：{}",message);
    }

    public void sendMessage(String message){
        for (WebSocket webSocket: webSocketSet){
            log.info("【websocket消息】 广播消息，message={}",message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }
}

二、vue代码

@ServerEndpoint("/webSocket")是你连接时的url，前端websocket连接url为： ws://localhost:8081/webSocket

1.根据后端返回的数据编写业务

mounted() {
    // WebSocket
      if ('WebSocket' in window) {
        this.websocket = new WebSocket('ws://localhost:8081/webSocket')
        this.initWebSocket()
      } else {
        alert('当前浏览器 Not support websocket')
      }
    },
    beforeDestroy () {
      this.onbeforeunload()
  },
  methods: {
    initWebSocket () {
        // 连接错误
        this.websocket.onerror = this.setErrorMessage
 
        // 连接成功
        this.websocket.onopen = this.setOnopenMessage
 
        // 收到消息的回调
        this.websocket.onmessage = this.setOnmessageMessage
 
        // 连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage
 
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage () {
        console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
      },
      setOnopenMessage () {
        console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
      },
      setOnmessageMessage (event) {
        // 根据服务器推送的消息做自己的业务处理
        console.log('服务端返回：' + event.data)

        
      },
      setOncloseMessage () {
        console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
      },
      onbeforeunload () {
        this.closeWebSocket()
      },
      closeWebSocket () {
        this.websocket.close()
      }
  }

三、部署项目到服务器时配置nginx

部署到服务器访问会失败   需要配置在nginx.conf文件里配置

     location ^~ /webSocket {
			proxy_pass			http://xxx:8081;
			proxy_set_header 	Host $host;
			
			#websocket的配置，将http连接升级为websocket连接
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "Upgrade";
			proxy_read_timeout 3600s;

		}