詢問-websocket

抱歉 我完全沒概念
我用angular2 要在web使用websocket連線
裝了angular2-websocket
(https://github.com/afrad/angular2-websocket)
但是 我不太了解在網站加入websocket的架構是如何
我只想到寫成service.ts 並用注入服務方式在每一個component加上去
然後… 在網頁Acomponent 一開始做連線後…換頁切到Bcomponent ,socket會斷線嗎
抱歉 因為以前網頁A頁連到B頁 理論上不是所有功能class等都會reload ?
我試過在Acomponent connect後, 在Bcomponent 可以看到socket是connected的狀態
但是按了F5 ,connect便斷線了
恩 我很不會形容 大家可能霧煞煞
主要是可否提點 websocket要如何使用
讓web 不管到哪一頁或是F5 ,都是保持連線狀態??
感激大家

2個讚

關於保持連線、我自己的做法是在伺服器端用另一個 array 儲存想要的連線清單,連線/斷線時比較 user id 和 socket id,如 user id 相同可當做同一使用者。只要該使用者還有一個連線,我就不當他離開。
另外沒試過但想到的,就是配合 rxjs 的 operator 使連線清單不會即時 emit 到其他連線上,而要等待數秒才 emit,這樣應可減少 reload 時在其他機上看到一個人短暫消失再加入的情況。

1個讚

大概知道一些方向了 謝謝
可是今天試做 邏輯打結了
Acomponent 呼叫 socketService.ts 使用send()傳送MESSAGE
而在 socketService.ts onMessage() 等待SERVER回傳訊息
但是… 在socketService.ts 要如何把接收到的資料回傳到 Acomponent???

Web Worker 是比較建議的作法,除了persistent connection外,可減少前段應用程式在和後端交涉時對UI的干涉

Angular with Web Workers: Step by step
Javascript mocking library for websockets and socket.io

2個讚

可以嘗試用 rxjs 封裝 websocket,像是這個 rxjs-websockets

2個讚

我自己也是用 rxjs 的 Subject 封裝不同 event

1個讚

謝謝大家
最近試了幾天 大概了解要在component用subscribe方式去listen
方向是如此吧 ? 感激

1個讚

我本來的構思 是想有個config檔設定走http service 或是socket

但在socket方面 ,似乎不能從service.ts做subscribe 因為不知後端response如何主動傳至component
於是架構改由component判斷用何種方式要值 再subscribe http service或 socket service
這是我目前的心得
或是大家有其他想法? 謝謝

可先設計好兩種 service 都通用的 base class,然後在 module provide 時根據 config 注入不同實作

2個讚

謝謝你提供此訊息
原來 providers也可以加判斷式在裡面
又學到一招了 :smile::smile:

找到一些方法:laughing:
已大概修正(參考https://stackoverflow.com/questions/47869214/websocket-in-angular-4)
建立BehaviorSubject 並且在 相關地方(onopen,onerror,onclose )加入狀態
this.myServerOnSubject.next(true/false);
再subscribe 已取得socket狀態
感謝大家的分享 謝謝

1個讚

進來學習學習~:joy: