From 8f2a4fd023a42d5f3b82a2a97b0c39d8bbee274d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 03 四月 2024 13:51:01 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/websocket.js | 97 ++++++++++++++++++++++++++++++------------------
zy-asrs-flow/src/pages/map/index.jsx | 15 +++++--
zy-asrs-flow/src/config/setting.ts | 1
3 files changed, 71 insertions(+), 42 deletions(-)
diff --git a/zy-asrs-flow/src/config/setting.ts b/zy-asrs-flow/src/config/setting.ts
index 0d5a234..c457ca9 100644
--- a/zy-asrs-flow/src/config/setting.ts
+++ b/zy-asrs-flow/src/config/setting.ts
@@ -1,5 +1,6 @@
// 鎺ュ彛鍦板潃
export const API_BASE_URL: string = 'http://127.0.0.1:9090/wcs';
+export const WEBSOCKET_BASE_URL: string = 'ws://127.0.0.1:9090/wcs';
export const API_TIMEOUT: number = 60;
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 5709878..987f5d2 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -8,14 +8,13 @@
FileAddOutlined,
CompressOutlined,
SettingOutlined,
- CloseOutlined
} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
import Edit from './components/device';
import Settings from './components/settings'
import * as Utils from './utils'
-import * as Websocket from './websocket'
+import WebSocketClient from './websocket'
import Player from './player';
import MapSearch from './header/search';
import MapFloor from './header/floor';
@@ -61,7 +60,7 @@
SETTINGS_MODEL: "3",
})
-let player;
+let player, websocket;
const Map = () => {
const intl = useIntl();
@@ -104,6 +103,13 @@
Utils.syncMapContainer(player.mapContainer);
Utils.syncNotify(notify);
+ websocket = new WebSocketClient('/ws/map/websocket');
+ websocket.connect();
+
+ setInterval(() => {
+ websocket.sendMessage('asds')
+ }, 1000)
+
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
@@ -123,10 +129,9 @@
player.adaptScreen();
Utils.mapNotify(intl.formatMessage({ id: 'map.load.success', defaultMessage: '娆㈣繋浣跨敤WCS绯荤粺' }));
}, 200)
-
- Websocket.createWs();
}
initialize();
+ console.log(1);
}, []);
// resize
diff --git a/zy-asrs-flow/src/pages/map/websocket.js b/zy-asrs-flow/src/pages/map/websocket.js
index 20dea9b..bc2001a 100644
--- a/zy-asrs-flow/src/pages/map/websocket.js
+++ b/zy-asrs-flow/src/pages/map/websocket.js
@@ -1,42 +1,65 @@
-export const createWs = () => {
- console.log('Creating WebSocket connection...');
- const webSocket = new WebSocket('ws://127.0.0.1:9090/wcs/map/websocket');
+import { WEBSOCKET_BASE_URL } from '@/config/setting'
- // 杩炴帴鎵撳紑鏃惰Е鍙�
- webSocket.onopen = function (event) {
- console.log('WebSocket connection opened:', event);
- // 鍦ㄦ娣诲姞鍙互鍦ㄨ繛鎺ユ墦寮�鏃跺彂閫佺殑浠讳綍娑堟伅
- // webSocket.send('Hello Server!');
- };
+export default class WebSocketClient {
- // 浠庢湇鍔″櫒鎺ユ敹鍒版秷鎭椂瑙﹀彂
- webSocket.onmessage = function (event) {
- console.log('WebSocket message received:', event.data);
- // 鍦ㄨ繖閲屽鐞嗘帴鏀跺埌鐨勬秷鎭�
- };
+ constructor(path) {
+ this.url = WEBSOCKET_BASE_URL + path;
+ this.webSocket = null;
+ }
- // 鍑虹幇閿欒鏃惰Е鍙�
- webSocket.onerror = function (event) {
- console.error('WebSocket error observed:', event);
- // 鍦ㄨ繖閲屽鐞哤ebSocket閿欒
- };
-
- // 杩炴帴鍏抽棴鏃惰Е鍙�
- webSocket.onclose = function (event) {
- console.log('WebSocket connection closed:', event);
- // 鍦ㄨ繖閲屽鐞嗚繛鎺ュ叧闂簨浠�
- // 浣犲彲鑳芥兂瑕侀噸鏂拌繛鎺ユ垨瀵圭敤鎴疯繘琛屽弸濂芥彁绀�
- };
-
- // 璇锋眰鍏抽棴WebSocket杩炴帴锛堜富鍔ㄥ叧闂級锛屼綘鍙互浠庡叾浠栧嚱鏁拌皟鐢ㄨ繖涓�
- const closeWebSocket = () => {
- if (webSocket.readyState === WebSocket.OPEN) {
- webSocket.close(); // 杩欏皢瑙﹀彂'onclose'浜嬩欢
+ connect() {
+ if (!this.url) {
+ console.error('WebSocketClient: Cannot connect without url.');
+ return;
}
- };
- return {
- webSocket,
- closeWebSocket
- };
-};
\ No newline at end of file
+ this.webSocket = new WebSocket(this.url);
+
+ this.webSocket.onopen = (event) => {
+ console.log('WebSocket connection opened:', event);
+ // 杩炴帴鎴愬姛鍚庡彲浠ュ彂閫佹秷鎭�
+ // this.sendMessage('Hello Server!');
+ };
+
+ this.webSocket.onmessage = (event) => {
+ console.log('WebSocket message received:', event.data);
+ this.onMessage(event.data);
+ };
+
+ this.webSocket.onerror = (event) => {
+ console.error('WebSocket error observed:', event);
+ };
+
+ this.webSocket.onclose = (event) => {
+ console.log('WebSocket connection closed!');
+ this.reconnect();
+ };
+ }
+
+ sendMessage(message) {
+ if (this.webSocket.readyState === WebSocket.OPEN) {
+ this.webSocket.send(message);
+ } else {
+ console.error('WebSocketClient: Cannot send message, WebSocket connection is not open.');
+ }
+ }
+
+ onMessage(data) {
+ // 瀛愮被鍙兘浼氶噸鍐欒繖涓柟娉曟潵澶勭悊娑堟伅
+ console.log('WebSocketClient: Message received:', data);
+ }
+
+ close() {
+ if (this.webSocket.readyState === WebSocket.OPEN) {
+ this.webSocket.close();
+ }
+ }
+
+ reconnect() {
+ setTimeout(() => {
+ console.log('WebSocketClient: Attempting to reconnect...');
+ this.connect();
+ }, 3000);
+ }
+
+}
\ No newline at end of file
--
Gitblit v1.9.1