어떤 사건으로
· 서버에서 클라이언트에 이벤트를 알리고 처리하고 싶습니다.
· 그러나 기존 시스템은 그대로 사용하고 싶습니다.
같은 요청이 있었기 때문에 그 때의 대응 메모

이전에 FCM을 사용하여 ServiceWorker에서 상호 작용해 보았지만,
대응 브라우저나 Push 전달의 구조 등 조금 수고가 걸릴 것 같았기 때문에,
Node.js/Socket.io의 조합으로 알림 메커니즘 만 구축하려고합니다 ...

FCM에 대한 기사는 아래를 참조하십시오.
Firebase Cloud Messaging(FCM)을 사용한 WebPush 알림 구현 정보

시스템 개요

이미지로서는 첨부 화상과 같은 형태로, WebSocket에서 통신하는 부분은 별서버로 실시.
단순히 통지의 교환을 실시하는 허브로서 독립시켜,
클라이언트 측은 이벤트를 수신했을 때 기존 시스템에 이벤트를 통지하여 처리한다.



이렇게하면 기존 시스템을 크게 수정하지 않아도
서버로부터 클라이언트에 임의의 타이밍으로 임의의 처리를 할 수 있게 되어,
이벤트 구독이라고 하는 형태로 심플하게 구현 가능한가라고 생각 착수.

주로 WebSocket으로 접속하고 있는 유저의 관리를 기존의 어플리케이션 시스템으로 관리하고 있는 유저로 통지 처리를 실시할 수 있도록(유저 ID나 그룹의 관리 등) 라이브러리내에서 구현하고 있습니다.

실제로 구축한 것은 아래를 참고로 ...
제작 부분이나 개선 가능한 곳이 많지만 일단 움직이면 ...
htps : // 기주 b. 코 m / b ri ght ゔ ぃ 에 / u b

구현 예

서버

Express와 Socket.io의 Node.js 서버를 준비해야하지만,
쉽게 위를 실현하기 위해 통합할 수 있습니다.

server.js

// ユーザ管理の仕組みの初期化も含めてここで実施
var WebSocketNotification = require('websocket-notification');
var webSocketNotification = new WebSocketNotification();

io.on('connection', function(socket){

  // WebSocket Notification Libraryで標準で用意されているメソッドを付与する
  // - ユーザ管理: login, disconnect イベントの設定
  // - 通知: POST /notification APIの実装
  webSocketNotification.setMethod(io, socket, app);
});

클라이언트

웹의 클라이언트 측은 Bower에서 라이브러리를로드 한 후
아래와 같이 초기화하는 것만으로 기능 구현은 가능

index.html

<script src="/components/socket.io-client/dist/socket.io.js"></script>
 <script src="/components/webSocketNotification/src/client/client.js "></script>
 <script>
   var obj = {
     systemName: '所属するシステムID' // 任意、指定がない場合はサーバ側でdefalutsが指定される
     userId: 'ユーザのIDを指定',     // 任意、指定がない場合はサーバ側でsocket.idが指定される
     groups: ['所属するグループIDなどを指定'] // 任意、指定がない場合は空配列となる
   };

   // WebSocket Clientの初期化
   var client = new WebSocketNotificationClient();
   // 任意のパラメータをセットする
   client.setOptions(obj);
   // WebSocketのコネクションを貼る
   var webSocket = client.getInstance(io);

   // getInstanceで返ってくる値は、socket.io-clientのインスタンスであるため、
   // 通常のsocket.on('イベント名', function(){}); といった書き方が可能である

   // サーバから通知を受け取ったときの処理を定義する。（デフォルトは、console.logでレスポンスが表示されるのみ）
   webSocket.on('notification', function(res) {
     // TODO: ここに処理を記載
     // - Angularなどのフレームワークに対してイベントを発火し、任意の処理を行うのもよし
     // - ここにべた書きで実施したい処理を行うのもよし
   });
 </script>

모든 이벤트 발화

여기까지 오면 나머지는 기존의 어플리케이션 시스템으로부터 WebSocket 경유로 통지를 보내는 부분입니다.
서버 내부에서의 HTTP 리퀘스트를 이미지하고 있어 아래와 같은 리퀘스트를 던지는 것으로 통지가 가는 구조입니다.

curl -X POST http://localhost:3000/notification -d '{"sentType": "user", "target": ["10001"], "message": {"statusCode": 200, "action": "alert"}}'

요약

우선 WebSocket 경유로 기존 시스템을 살린 채 간단하게 서버로부터 클라이언트에 이벤트를 보내, 처리를 실시할 수 있었습니다만, nodejs의 프로세스가 재기동하면 유저 정보가 사라지거나, 인프라측의 정비가 ​​아직도 혹은, 프로덕션 운용이 상정된 제작이 아니기 때문에 향후 개수를 하면서, 우선은 작은 기능으로부터 짜넣어 사용성을 봐 가면 된다고 생각합니다.