プロジェクトの背景紹介
最近、私が書いたプロジェクトにはソーシャルモジュールがあり、関数を実装する必要があります。ユーザーが好かれ、コメントされ、フォローなどが発生した場合、メッセージをユーザーにリアルタイムでプッシュする必要があります。最終的なプロジェクトアドレスは、https：//github.com/noiron/socket-message-pushです。ここでは、実装のアイデアといくつかのコードを紹介します。
プロジェクトプロセスにはいくつかのオブジェクトがあります。
イベント処理のプロセスは次のとおりです。
メッセージを特定のユーザーにプッシュできるように、メッセージプッシュサーバーは現在のオンラインユーザーの情報を記録する必要があることを考えてください。したがって、ユーザーがログインするとき、彼または彼女は自分のユーザー情報をnode.jsサーバーに送信する必要があります。この双方向のリアルタイムメッセージングを達成するために、WebSocketが実装されていることは明らかです。メッセージプッシュサーバーでnode.jsを使用するため、非常に便利なオプション、socket.ioがあります。
socket.ioの紹介
Socket.ioは、JavaScriptに実装されたリアルタイムの双方向通信のライブラリです。機能を実装するのに簡単に使用できます。
socket.ioには2つの部分が含まれています。
socket.ioの次の例を見ることができます。これにより、socket.ioの基本的な使用法が発行してイベントを聴くことができます。
io.on（ 'connection'、function（socket）{socket.emit（ 'request'、 / * * /）; //ソケットio.emit（ 'broadcast'、 'broadcast'、 'broadcast'、 'broadcast'、 'emit socket.on（' Reply '、function（）{ / * /}）;socket.io：socke.ioについて注意すべき別のことは、完全にWebsocketの実装ではありません。
注：socket.ioはWebSocketの実装ではありません。 Socket.ioは実際に可能な場合はWebSocketをトランスポートとして使用しますが、メッセージの確認が必要なときにパケットタイプ、名前空間、ACK IDなど、各パケットにメタデータを追加します。
次に、Express.jsを使用してサーバー側のプログラムを確立し、socket.ioを導入する必要があります。
node.jsサーバーの構築
Express.jsを使用して、基本的なサーバーを構築します
Express.jsを使用してnode.jsメッセージプッシュサーバーを作成し、最初に簡単な例を使用してその機能を閲覧します。
// server.jsconst expression = require（ 'express'）; const app = express（）; const path = require（ 'path'）; const http = require（ 'http'）。const port = 4001; app.use（expres.join（__ dirname、 'public'））） + '/public/index.html');}）; app.get('/api'、function（req、res）{res.sendfile（__ dirname + '/public/index.html'）;（ {console.log（ `ristening on port：$ {port}`）;}）;上記のコードをserver.jsとして保存し、新しいパブリックフォルダーを作成し、index.htmlファイルを入れます。次のコマンドを実行します。
node server.js
これで、LocalHost：4001でその効果を表示できます。
socket.ioの紹介
基本的なExpressサーバーがあるので、socket.ioを次に追加する必要があります。
const io = require（ 'socket.io'）（http）; io.on（ 'connection'、function（socket）{console.log（ 'a user connected'）; socket.broadcast.emit（ 'new_user'、{}）;}ここでのIOは、接続イベントに耳を傾けます。クライアントがサーバーとの接続を確立すると、ここのコールバック関数が呼び出されます（クライアントのコードは次のセクションで紹介されます）。
関数のパラメーターソケットは、現在のクライアントとサーバーの間に確立された接続を表します。下の図に示すように、クライアントプログラムで確立されたソケット接続を印刷できます。
ID属性を使用して、この接続を識別して、サーバーが特定のユーザーにメッセージを送信できるようにすることができます。
socket.broadcast.emit（ 'new_user'、{}）;このコード行は、ソケットが現在サーバーと接続しているすべてのクライアントにnew_userという名前のメッセージをブロードキャストすることを意味します（それ自体を除く）。
バックエンドプッシュメッセージの処理プロセス
ユーザー情報の処理
便宜上、ユーザー情報を保存するために1つの配列のみが使用されます。これは、実際の作業で必要に応じてデータベースに配置できます。
Global.users = []; // Logged-InユーザーのTokenid、Socketidを記録します
ユーザーがログインすると、クライアントはユーザー_loginイベントをサーバーに送信します。サーバーが受信した後、次のことが行われます。
socket.on（ 'user_login'、function（info）{const {tokenid、userid、socketid} = info; addsocketid（users、{tokenid、socketid、userid}）;}）;AddSocketID（）は、ユーザー情報をユーザー配列に追加します。異なるユーザーは、Tokenidを通じてそれらを区別できます。各ユーザーにはソケットアレイがあり、存在する可能性のある複数のソケットを保存します。この関数の特定のコードは、SRC/utils.jsファイルにあります。
同様に、ユーザー情報を削除するために使用されるdeleteSocketID（）関数もあり、コードは同じファイルに表示されます。
ユーザーのtokenidを取得した後、対応するソケットを見つけて、特定のユーザーにメッセージをプッシュする必要があります。
// id = socketid io.sockets.to（socketid）.emit（ 'receive_message'、{entityType、data}）を使用してこの接続にのみメッセージを送信します。サーバーのアイデアはほぼこのようなものです。次に、クライアントでそれに応じて処理する方法を紹介しましょう。
クライアント
socket.ioの初期化
まず、たとえばCDNを介して、HTMLファイルにsocket.ioのクライアント側ファイルを紹介します。
<スクリプトsrc = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>
紹介する他の方法：
<script src = "/socket.io/socket.io.js"></script>const io = require（ 'socket.io-client'）; //
socket.ioを導入した後、IO関数が取得され、メッセージプッシュサーバーとの接続を確立するために使用されます。
//ノードサーバーを展開した後のアドレスが次のと仮定します：https：//www.example.com/ws// then：ws_host = 'https：//www.example.com'const msgsocket = io（ `$ {ws_host}`、{secure：true、pature：'/ws/socket.io '};ローカルで聞く場合：
const msgsocket = io（ 'http：// localhost：4001'）;
ここでio（ 'https://www.example.com/ws'）として記述する場合、エラーが発生し、/wsをパスに書き込む必要があります。
この変数を他のファイルで使用できるようにするには、MSGSocketをグローバル変数として使用できます。
window.msgsocket = msgsocket;
ユーザーは接続を確立します
//ユーザーがログインしたら、ユーザー情報をサーバーに送信します。サーバーは、メッセージを受信した後、ユーザーとソケットマッピングを作成します。 msgsocket.emit（ 'user_login'、{userid、socketid：msgsocket.id、tokenid}）;プッシュされたメッセージを受信した後の処理
// WebSocket Connectionが確立されたら、Receive_Message MSGSocket.ON（ 'receed_message'、msg => {store.dispatch（{type： 'new_socket_msg'、payload：msg}）;}）;WebSocketサーバーがクライアントにメッセージをプッシュすると、クライアントはreceive_messageイベントを聞く必要があり、受信したパラメーターには対応する保留中の情報が含まれます。
Reduxはデータ処理に使用されるため、New_Socket_msgアクションがここに発送され、その後のルーチンRedux処理フローが提供されます。
プロジェクトの使用
githubのプロジェクトアドレス：https：//github.com/noiron/socket-message-push
npm run dev
開発環境でテストすることができ、これでポート4001で実行されているメッセージプッシュサーバーがあります。
ただし、ここにはメッセージを送信するバックエンドサーバーはありません。そのため、郵便配達員を使用してメッセージの送信をシミュレートします。
プログラムの機能を実証するために、index.htmlファイルがプロジェクトのクライアントフォルダーの下に配置されます。このファイルは実際のプロジェクトでは使用できないことに注意してください。メッセージプッシュの効果を表示するために使用するだけです。
サーバーをオンにした後、オープンクライアント/index.htmlをオープンし、プロンプトに従って好きなようにトークネイドを入力します。
郵便配達員を使用して、次のメッセージをlocalhostに投稿します：4001/API：
{//トークンアレイは、メッセージ「トークン」を押したいユーザーを示します：["1"、 "2"]、「data "：" your pass !!! "}この時点で、すべてがうまくいった場合、クライアントのコンソールで受信したメッセージを表示できるはずです。
複数のクライアントページを開き、異なるTokenidsを入力してから、メッセージが正しいユーザーに送信されるかどうかを確認できます。
要約します
上記は、編集者がsocket.ioを使用してリアルタイムメッセージプッシュ機能を実現するために紹介したものです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！