Reactシリーズ--websocketチャットシステムreactの実現

前奏
この文章はreactでsocketを使うことに慣れていないだけだ.ioの人、そしてwebsocketの入門者が役に立ちます.
次のダイナミックグラフに示すチャットシステムはreact+express+websocketで構築されています.ぼやけていますね.このような効果を得るには、自分で2つのウィンドウを開き、2人のユーザーの自問自答を作成しました.高度な技術はありませんが、websocketに触れたいフロントエンドエンジニアの多くにとって、バックエンドが苦手なwebsocketコードは硬傷かもしれません.
開発環境
サービス側:expressサーバexpressサーバ
クライアント:reactテクノロジースタック、開発環境はフロントエンドサーバ方式を採用し、パッケージ化後、静的リソースをサービス側ディレクトリの下に置いてテストします.
基本的な紹介
リアルタイムの双方向通信チャットシステムを実現するにはajaxポーリング(長いか短いか)を考えるかもしれませんが、websocketの実現が一番ほしいです.
テストコードを書く前に、フロントエンドが何を使うのか、バックエンドが何を使うのか、バックエンドがexpress、フロントエンドがreactを選んだ.
1、サービス側が使用したjsライブラリ

express

socket.io

2、フロントエンドで使用したjsライブラリ

"react": "^16.2.0",
"react-dom": "^16.2.0",
"socket.io-client": "^2.0.4"

expressサービス側の実現
サービス側の実現はあまり話したくありません.公式demoを見てもいいです.コードはとても詳しいです.socket公式demo実現
サービス側のコアコード:

io.on('connection', function (socket) {
    //       “new message” ，             
    socket.on('new message', function (data) {
        //        “new message”
        socket.broadcast.emit('new message', {});
    });
    
    //       “add user” ，             
    socket.on('add user', function (username) {
        socket.username = username;
        //           'login'  
        socket.emit('login', {});
    });
    
    //            
    socket.on('disconnect', function () {});
});

socketとmongodbは少し似ていて、socketサービスを作成する必要があります.作成に成功したら、on()でactionを傍受することができます.actionはここで「new message」、「add user」、「login」などの命令を表しています.これらの命令は自分で命名することができます.
これらの命令はどんな役割を果たしますか?
クライアントとサービス側がsocket通信を確立した後、サービス側はクライアントに命令を出すことができ、クライアントはサービス側に命令を出すことができ、開発者はまず双方の通信に命令システムを約束する必要がある.
たとえば、サービス側は「new message」という命令を作成しますが、クライアントがこの命令を作成しないと、クライアントはサービス側が発行したこの命令を受信できません.クライアントの心の中で考えているかもしれません:サービス端のお兄さんは何をしていますか?
クライアントも「new message」コマンドを必要とし、双方は通信の合意に達することができ、双方は互いにこのコマンドを出して相手に最新の状態を伝えることができる.
上のコードはsocketに言及しています.Emit()とsocket.broadcast.Emit()の2つの使い方は,以下のemit使い方の詳細な説明を見ることができる.

//        socket      
socket.emit('message', "this is a test");

//         ，     
socket.broadcast.emit('message', "this is a test");

//    “  ”  （  ）      ，     
socket.broadcast.to('game').emit('message', 'nice game');

//         ，     
io.sockets.emit('message', "this is a test");

//    “  ”  （  ）     ，     
io.sockets.in('game').emit('message', 'cool game');

//       socketid
io.sockets.socket(socketid).emit('message', 'for your eyes only');

socketのこの挙動はreduxに似ているが,reduxは一方向データストリームであり,socketは双方向である.
Reactクライアントの実装
Reactエンドの実現こそ、私たちが注目すべきポイントです.
フロントエンドエンジニアとして、バックエンドの大神と協力するだけでいいことが多い(スタック全体を除く).
1.reactコンポーネントにsocketをインポートする.io-client
フロントエンドはsocket.io-clientライブラリは、非常に簡単に使用できます.次のコードではsocket.を直接インポートします.io-clientは、サービス側のip+ポートを指すだけでよい.

import React, { Component } from 'react'

//require('socket.io-client')('   ip+  ')
const socket = require('socket.io-client')('http://localhost:3077');

class App extends Component {
    
}

2.componentDidMountでsocketの受信命令actionを書く
socket.on()は,サービス側が約束した命令を設定し,サービス側がこれらの命令を発行するとクライアントが受信できる.この場合、バックエンドから返されるデータdataに基づいて、stateの状態を設定したり、サービス側がプッシュしたデータをレンダリングしたりするなど、コールバック関数でフロントエンドの処理を行うことができます.

componentDidMount() {
        socket.on('login', (data) => {
            console.log(data)
        });
        socket.on('add user', (data) => {
            console.log(data)
        });
        socket.on('new message', (data) => {
            console.log(data)
        });
    }

3、クライアントがサービス側にデータをプッシュする
多くの場合、クライアントはサービス側に新しいデータ更新があることを伝える必要があります.チャットインタフェースで新しいメッセージを送ったとき、サービス側に伝えるにはsocket.Emit()メソッドは,サービス側プッシュと同様である.

socket.emit('new message', value)

まとめ
1、相手に何か言いたいことがあったらsocketを使うemit().
2、相手の話を受け取りたいときはsocketを使うon().
3、emitにはポイント・ツー・ポイント、ラジオなどの使い方があります.
4、最後に一言、これらはすべて基礎知識です.