vue+sprong boot模拟服务端实时向前端推送数据

一、后端
1、安装websocket依赖

            org.springframework.boot
            spring-boot-starter-websocket
        

2、配置websocket配置类

package com.iot.zmtestboot.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 {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3、配置websocket服务类

package com.iot.zmtestboot.websocketconfig;

import org.springframework.stereotype.Service;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/ws")
@Service
public class WebSocketServer {
    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();
    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    
    @onOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     // 加入set中
        System.out.println("连接成功");
    }

    
    @onClose
    public void onClose() {
        webSocketSet.remove(this);  // 从set中删除
        System.out.println("关闭连接");
    }

    @onMessage
    public void onMessage(String message,Session session) {
        System.out.println("来自客户端的消息:" + message);

        // 群发消息
        while (session.isOpen()){
            for (WebSocketServer item : webSocketSet) {
                try {
                    Date d = new Date();
                    SimpleDateFormat sbf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                    System.out.println(sbf.format(d));
                    item.sendMessage(sbf.format(d));
                    Thread.sleep(1000);

                } catch (IOException e) {
                    e.printStackTrace();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }

    }

    
    @onError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

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

二、前端部分

三、如果导入pom依赖有问题，则选择自动适配

            org.springframework.boot
            spring-boot-starter-websocket
            2.0.2.RELEASE
        

四、前后端互相通信
1、后端代码

package com.iot.zmtestboot.websocketconfig;

import org.springframework.stereotype.Service;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/ws")
@Service
public class WebSocketServer {
    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();
    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    
    @onOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     // 加入set中
        System.out.println("连接成功");
    }

    
    @onClose
    public void onClose() {
        webSocketSet.remove(this);  // 从set中删除
        System.out.println("关闭连接");
    }

    @onMessage
    public void onMessage(String message,Session session) {
        System.out.println("来自客户端的消息:" + message);
//        System.out.println(session.isOpen());
//        System.out.println(session);
        // 群发消息
        //while (session.isOpen()){
//            System.out.println(this.session);
            for (WebSocketServer item : webSocketSet) {
                try {
                    Date d = new Date();
                    SimpleDateFormat sbf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                    //System.out.println(sbf.format(d));
                    item.sendMessage(sbf.format(d));
                    Thread.sleep(1000);

                } catch (IOException e) {
                    e.printStackTrace();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
      // }

    }

    
    @onError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

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

2、前端代码