Merge branch 'main' of https://github.com/fmfe/socket-connect

dp-os · Apr 26, 2023 · be4dfcb · be4dfcb
2 parents 765cf1b + 1f80377
commit be4dfcb
Show file tree

Hide file tree

Showing 18 changed files with 173 additions and 74 deletions.
diff --git a/demo/simple/client.ts b/demo/simple/client.ts
@@ -3,18 +3,18 @@ import { EVENT_NAME } from './config';
 
 const socket = new Socket({
     url: 'ws://localhost:5173',
-    protocols: 'vite-hmr'
+    protocols: 'vite-hmr',
 });
 
 function initConnect() {
     const connectEl = document.getElementById('connect')!;
     const disconnectEl = document.getElementById('disconnect')!;
 
     connectEl.onclick = () => {
-        socket.connect()
+        socket.connect();
     }
     disconnectEl.onclick = () => {
-        socket.disconnect()
+        socket.disconnect();
     }
 }
 
@@ -61,19 +61,19 @@ function initSubscribe() {
         socket.send({
             type: 'custom',
             event: EVENT_NAME,
-            data: true
-        })
+            data: true,
+        });
     }
     unsubscribe.onclick = () => {
         socket.send({
             type: 'custom',
             event: EVENT_NAME,
-            data: false
-        })
+            data: false,
+        });
     }
 
 }
 initConnect();
 initState();
 initTime();
-initSubscribe()
+initSubscribe();
diff --git a/demo/simple/server.ts b/demo/simple/server.ts
@@ -26,7 +26,7 @@ function serverTime(client: WebSocket) {
     const subscribe = (subscribe: boolean) => {
         if (subscribe) {
             if (timer) return;
-            timer = setInterval(send, 1000)
+            timer = setInterval(send, 1000);
             send();
         } else {
             unsubscribe();

diff --git a/demo/visible/client.ts b/demo/visible/client.ts
@@ -1,19 +1,21 @@
 import { Socket, SocketState, visiblePlugin } from '../../src';
+import { EVENT_NAME } from './config';
 
 const socket = new Socket({
     url: 'ws://localhost:5173',
     protocols: 'vite-hmr',
+    pushHiddenMessage: false,
     plugins: [
         visiblePlugin({
             visible: (socket) => {
                 socket.send({
                     type: 'visible',
-                })
+                });
             },
             invisible: (socket) => {
                 socket.send({
                     type: 'invisible',
-                })
+                });
             },
         })
     ]
@@ -24,10 +26,10 @@ function initConnect() {
     const disconnectEl = document.getElementById('disconnect')!;
 
     connectEl.onclick = () => {
-        socket.connect()
+        socket.connect();
     }
     disconnectEl.onclick = () => {
-        socket.disconnect()
+        socket.disconnect();
     }
 }
 
@@ -55,5 +57,40 @@ function initState() {
         stateEl.innerText = text;
     })
 }
+
+function initTime() {
+    const timeEl = document.getElementById('time')!;
+
+    socket.subscribeMessage((ev) => {
+        const result = JSON.parse(ev.data);
+        if (result.event === EVENT_NAME) {
+            timeEl.innerHTML += `<div>${result.data.date}<div/>`
+        }
+    });
+}
+
+export function initSubscribe() {
+    const subscribeEl = document.getElementById('subscribe')!;
+    const unsubscribe = document.getElementById('unsubscribe')!;
+
+    subscribeEl.onclick = () => {
+        socket.send({
+            type: 'custom',
+            event: EVENT_NAME,
+            data: true,
+        });
+    }
+    unsubscribe.onclick = () => {
+        socket.send({
+            type: 'custom',
+            event: EVENT_NAME,
+            data: false,
+        });
+    }
+
+}
+
 initConnect();
 initState();
+initTime();
+initSubscribe();
diff --git a/demo/visible/config.ts b/demo/visible/config.ts
@@ -0,0 +1 @@
+export const EVENT_NAME = 'visible-time';
diff --git a/demo/visible/index.html b/demo/visible/index.html
@@ -9,6 +9,8 @@
 <body>
     <button id="connect">开始连接</button>
     <button id="disconnect">断开连接</button>
+    <button id="subscribe">订阅时间</button>
+    <button id="unsubscribe">取消时间订阅</button>
     <p id="state">未连接</p>
     <time id="time"></time>
     <script type="module" src="./client.ts"></script>

diff --git a/demo/visible/server.ts b/demo/visible/server.ts
@@ -0,0 +1,44 @@
+import dayjs from 'dayjs';
+import { Plugin, WebSocket } from 'vite';
+import { EVENT_NAME } from './config';
+
+export const visiblePlugin: Plugin = {
+    name: 'socket-visible',
+    configureServer({ ws }) {
+        ws.on('connection', (client) => {
+            serverTime(client);
+        });
+    }
+}
+
+function serverTime(client: WebSocket) {
+    let timer: NodeJS.Timer | null = null;
+    const unsubscribe = () => {
+        if (timer) {
+            clearInterval(timer);
+            timer = null;
+        }
+    }
+    const send = () => {
+        const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
+        client.send(JSON.stringify({ event: EVENT_NAME, data: { date } }));
+    }
+    const subscribe = (subscribe: boolean) => {
+        if (subscribe) {
+            if (timer) return;
+            timer = setInterval(send, 1000);
+            send();
+        } else {
+            unsubscribe();
+        }
+    }
+    client.on('close', () => {
+        unsubscribe();
+    });
+    client.on('message', (ev) => {
+        const result = JSON.parse(ev.toString());
+        if (result.event === EVENT_NAME) {
+            subscribe(result.data);
+        }
+    })
+}
diff --git a/demo/worker/client.ts b/demo/worker/client.ts
@@ -14,11 +14,11 @@ function initConnect() {
     const disconnectEl = document.getElementById('disconnect')!;
 
     connectEl.onclick = () => {
-        socket.connect()
-    }
+        socket.connect();
+    };
     disconnectEl.onclick = () => {
-        socket.disconnect()
-    }
+        socket.disconnect();
+    };
 }
 
 function initState() {
@@ -64,19 +64,19 @@ export function initSubscribe() {
         socket.send({
             type: 'custom',
             event: EVENT_NAME,
-            data: true
-        })
+            data: true,
+        });
     }
     unsubscribe.onclick = () => {
         socket.send({
             type: 'custom',
             event: EVENT_NAME,
-            data: false
-        })
+            data: false,
+        });
     }
 
 }
 initConnect();
 initState();
 initTime();
-initSubscribe()
+initSubscribe();
diff --git a/demo/worker/socket-worker.ts b/demo/worker/socket-worker.ts
@@ -2,7 +2,7 @@ import { Socket } from '../../src';
 
 const socket = new Socket({
     url: 'ws://localhost:5173',
-    protocols: 'vite-hmr'
+    protocols: 'vite-hmr',
 });
 
 socket.connect();
diff --git a/src/bridge/index.ts b/src/bridge/index.ts
@@ -1,2 +1,2 @@
 export * from './web-socket';
-export * from './worker-socket'
+export * from './worker-socket';
diff --git a/src/bridge/worker-socket.ts b/src/bridge/worker-socket.ts
@@ -10,17 +10,17 @@ export class WorkerSocketBridge implements SocketBridge {
                 case 'state':
                     switch (ev.data.data) {
                         case SocketState.open:
-                            this.onOpen && this.onOpen(new Event('onopen'))
+                            this.onOpen && this.onOpen(new Event('onopen'));
                             break;
                         case SocketState.error:
-                            this.onError && this.onError(new Event('onerror'))
+                            this.onError && this.onError(new Event('onerror'));
                             break;
                     }
                     break;
                 case 'message':
                     this.onMessage && this.onMessage(new MessageEvent('message', {
-                        data: ev.data.data
-                    }))
+                        data: ev.data.data,
+                    }));
                     break;
             }
         })
@@ -34,15 +34,15 @@ export class WorkerSocketBridge implements SocketBridge {
         if (this.onClose) {
             const event = new CloseEvent('close', {
                 code,
-                reason
+                reason,
             });
             this.onClose(event);
         }
     }
     public send(data: any): void {
         this._worker.postMessage({
             type: 'send',
-            data
+            data,
         });
     }
 }
diff --git a/src/plugins/ping.ts b/src/plugins/ping.ts
@@ -30,7 +30,7 @@ export function pingPlugin(socket: Socket) {
         if (state === SocketState.open) {
             start();
         } else {
-            end()
+            end();
         }
     })
 }
diff --git a/src/plugins/retry.ts b/src/plugins/retry.ts
@@ -23,7 +23,7 @@ export function retryPlugin(socket: Socket) {
             timer = setTimeout(() => {
                 timer = null;
                 connect();
-            }, socket.options.retryInterval || 3000)
+            }, socket.options.retryInterval || 3000);
         }
     }
 
@@ -32,7 +32,7 @@ export function retryPlugin(socket: Socket) {
             case SocketState.stateless:
             case SocketState.pending:
             case SocketState.open:
-                end()
+                end();
                 break;
             case SocketState.close:
             case SocketState.error:

diff --git a/src/plugins/visible.ts b/src/plugins/visible.ts
@@ -1,6 +1,5 @@
 import { Socket, SocketState } from '../socket';
 
-
 export interface VisibilityPluginOptions {
     visible: (socket: Socket) => void;
     invisible: (socket: Socket) => void;

diff --git a/src/plugins/worker.ts b/src/plugins/worker.ts
@@ -1,7 +1,7 @@
 import { type Socket } from '../socket';
 
 export function workerPlugin(socket: Socket) {
-    const isWorker = (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
+    const isWorker = (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope);
     function handle(type: string, data: any) {
         switch (type) {
             case 'send':
@@ -10,13 +10,13 @@ export function workerPlugin(socket: Socket) {
             case 'state':
                 postMessage({
                     type,
-                    data
+                    data,
                 });
                 break;
             case 'message':
                 postMessage({
                     type,
-                    data
+                    data,
                 });
                 break;
         }
@@ -28,8 +28,8 @@ export function workerPlugin(socket: Socket) {
     });
     socket.subscribeState((state) => {
         handle('state', state);
-    })
+    });
     socket.subscribeMessage((ev) => {
         handle('message', ev.data);
-    })
+    });
 }