网络-Websocket + Vue使用

这里有一篇文档可以参考一下> 闪现

POM文件

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

WebSocketConfig配置

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();
    }
}

Ccontroller接口

import com.alibaba.fastjson2.JSONObject;
import com.rise.common.utils.StringUtils;
import com.rise.domain.ProTriaxialData;
import com.rise.service.IProTriaxialDataService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
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.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArraySet;




@ServerEndpoint("/websocket")//表示将该类标识为一个 WebSocket 服务端端点，客户端可以通过该端点进行 WebSocket 连接。/websocket 是客户端连接的 URL 路径。
@EnableScheduling//表示启用 Spring 的定时任务调度功能。在该类中使用的 @Scheduled 注解才能生效。
@Component//表示将该类标识为一个 Spring 组件，由 Spring 自动进行管理和注入。
public class MyWebSocket {
    private static final Logger log = LoggerFactory.getLogger(MyWebSocket.class);


    private static int onlineCount = 0;

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

    private Session session;

    private Boolean isReceive = true;

    private Double lat = 36.679071;

    //业务注入
    private static IProTriaxialDataService proTriaxialDataService;

    @Autowired
    public void proTriaxialDataService(IProTriaxialDataService proTriaxialDataService){
        //WebScoketController是该类的类名 需要换成自己的类名
        MyWebSocket.proTriaxialDataService = proTriaxialDataService;
    }


    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);
        addOnlineCount();
        log.info("有新链接加入!当前在线人数:{}",getOnlineCount());
    }

    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        subOnlineCount();
        log.info("有一链接关闭!当前在线人数:{}",getOnlineCount());
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        log.info("socket 接收到信息{}",message);
        //判断前端是否已消费上一条信息
        if (StringUtils.isNotEmpty(message) && message.equals("已消费")){
            isReceive = true;
        } else {
            // 连接已断开
            isReceive = false;
        }
    }

    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    @Scheduled(cron = "*/2 * * * * *")
    public void sendMessageScheduledTask()throws Exception{
        log.info("socket 执行三数据推送给前端");
        try{
            if (isReceive){
                //测试数据
                ProTriaxialData data = new ProTriaxialData();
                data.setId(1);
                data.setLng(117.175169);
                data.setLat(lat);
                data.setWeight(13.96);
                data.setCarNumber("鲁A·88888");
                lat = lat + 0.001;
                if(lat>36.69){
                    lat =  36.679071;
                }
                //每2秒发送一次
//                List<ProTriaxialData> proTriaxialData = proTriaxialDataService.selectProTriaxialDataByCreateTimeDesc();
//                if (proTriaxialData!=null && proTriaxialData.size()>0){
                    String message = JSONObject.toJSONString(data);
                    for (MyWebSocket item : webSocketSet) {
                        item.sendMessage(message);
                    }
//                }
            }
            log.info("socket 数据发送成功！");
        }catch (Exception e){
            log.info("socket 数据发送失败!");
            e.printStackTrace();
        }

    }


    public static synchronized int getOnlineCount() {
        return MyWebSocket.onlineCount;
    }

    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }

}

前端

initWebSocket(){
      let that = this;
      var ws = new WebSocket("ws://IP:PORT/websocket");

      // 连接成功后的回调函数
      ws.onopen = function (params) {
        console.log('客户端连接成功')
        // 向服务器发送消息

        ws.send('认证成功！')
      };
      // 从服务器接受到信息时的回调函数
      ws.onmessage = function (e) {
        console.log('收到服务器响应', e.data)
        var data = e.data;
        if(data!=undefined){
          if(data.indexOf("{") != -1){
            var obj = JSON.parse(data);
            //接收后台发送的消息数据做后续处理
          }else{
            console.log(data);
          }
        }
      };
      // 连接关闭后的回调函数
      ws.onclose = function(evt) {
        console.log("关闭客户端连接");
      };
      // 连接失败后的回调函数
      ws.onerror = function (evt) {
        console.log("连接失败了",evt);
      };
      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
      window.onbeforeunload = function() {
        ws.close();
      }

      console.log(ws)
    },

如果发现连接不通可能需要在后台接口将url设置白名单