vue+spring boot+websocket模拟服务端实时向前端推送数据_vue实现消息实时推送

作者：小桥流水78 | 2024-07-28 02:07:52

踩

vue实现消息实时推送

一、后端
1、安装websocket依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
1
2
3
4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、配置websocket服务类

package com.sinoma.tj.realTimeMonitor.websocket;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;

import javax.annotation.PostConstruct;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

@ServerEndpoint("/ws")
@Service
public class WebSocketServer {
	private static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
	private static final AtomicInteger OnlineCount = new AtomicInteger(0);
	// concurrent包的线程安全Set，用来存放每个客户端对应的Session对象。
	private static CopyOnWriteArraySet<Session> SessionSet = new CopyOnWriteArraySet<Session>();



	/**
	 * 连接建立成功调用的方法
	 */
	@OnOpen
	public void onOpen(Session session) {
		SessionSet.add(session);
		int cnt = OnlineCount.incrementAndGet(); // 在线数加1
		log.info("有连接加入，当前连接数为：{}", cnt);
		//SendMessage(session, "收到消息，消息内容：");
	}

	/**
	 * 连接关闭调用的方法
	 */
	@OnClose
	public void onClose(Session session) {
		SessionSet.remove(session);
		int cnt = OnlineCount.decrementAndGet();
		log.info("有连接关闭，当前连接数为：{}", cnt);
	}

	/**
	 * 收到客户端消息后调用的方法
	 *
	 * @param message
	 *            客户端发送过来的消息
	 */
	@OnMessage
	public void onMessage(String message, Session session) {
		log.info("来自客户端的消息：{}",message);
		SendMessage(session, "收到消息，消息内容："+message);
	}

	/**
	 * 出现错误
	 * @param session
	 * @param error
	 */
	@OnError
	public void onError(Session session, Throwable error) {
		log.error("发生错误：{}，Session ID： {}",error.getMessage(),session.getId());
		error.printStackTrace();
	}

	/**
	 * 发送消息，实践表明，每次浏览器刷新，session会发生变化。
	 * @param session
	 * @param message
	 */
	public static void SendMessage(Session session, String message) {
		try {
			while (session.isOpen()){
				Date d = new Date();
				SimpleDateFormat sbf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
				session.getBasicRemote().sendText(sbf.format(d));
				System.out.println("发送数据");
				System.out.println(sbf.format(d));
				Thread.sleep(1000);
			}
		} catch (IOException e) {
			log.error("发送消息出错：{}", e.getMessage());
			e.printStackTrace();
		}catch (InterruptedException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 群发消息
	 * @param message
	 * @throws IOException
	 */
//	public static void BroadCastInfo(String message) throws IOException {
//		for (Session session : SessionSet) {
//			if(session.isOpen()){
//				SendMessage(session, message);
//			}
//		}
//	}

	/**
	 * 指定Session发送消息
	 * @param sessionId
	 * @param message
	 * @throws IOException
	 */
//	public static void SendMessage(String message,String sessionId) throws IOException {
//		Session session = null;
//		for (Session s : SessionSet) {
//			if(s.getId().equals(sessionId)){
//				session = s;
//				break;
//			}
//		}
//		if(session!=null){
//			SendMessage(session, message);
//		}
//		else{
//			log.warn("没有找到你指定ID的会话：{}",sessionId);
//		}
//	}
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

4、如果启动报错javax.websocket.server.ServerContainer not available ，则修改依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
1
2
3
4
5
6
7
8
9
10

二、前端部分

<template>
  <div>
    测试websocket<br />
    {{ recevieData }}
    <input type="button" value="打开socket" @click="initWebSocket" />
    <input type="button" value="关闭socket" @click="closewebsocket" />
    <!-- <input type="button" value="发送数据给java" @click="sendwebsocket" /> -->
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      websock: null,
      recevieData: "",
    };
  },
  // created() {
  //   this.initWebSocket();
  // },
  destroyed() {
    // this.websocketsend("closeWebsocket");
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    // sendwebsocket() {
    //   //发送消息
    //   this.websocketsend("我是前端");
    // },
    closewebsocket() {
      this.websock.close(); //离开路由之后断开websocket连接
    },
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://localhost:3310/ws";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let sendDataString = "连接数据";
      this.websocketsend(sendDataString);
    },
    websocketonerror() {
      //连接建立失败重连
      //this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      console.log("数据接收");
      console.log(e.data);
      this.recevieData = e.data;
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

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

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.0.2.RELEASE</version>
        </dependency>
1
2
3
4
5

四、前后端互相通信
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<WebSocketServer> 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();
                }
            }
      // }

    }

    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

    /**
     * 发送消息
     * @param message 客户端消息
     * @throws IOException
     */
    private void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

2、前端代码

<template>
  <div>
    测试websocket<br />
    {{ recevieData }}
    <input type="button" value="打开socket" @click="initWebSocket" />
    <input type="button" value="关闭socket" @click="closewebsocket" />
    <!-- <input type="button" value="发送数据给java" @click="sendwebsocket" /> -->
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      websock: null,
      recevieData: "",
    };
  },
  // created() {
  //   this.initWebSocket();
  // },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    closewebsocket() {
      this.websock.close();
    },
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://localhost:3310/ws";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.websocketsend("connectSuccess");
    },
    websocketonerror() {
      //连接建立失败重连
      //this.initWebSocket();
      // handleErrors(e)
    },
    websocketonmessage(e) {
      //数据接收
      console.log("数据接收");
      console.log(e.data);
      this.recevieData = e.data;
      this.websocketsend("OK");
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
      // this.websocketonerror();
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/892400