👓💻 NodeJSサービスの間でウェブソケット接続をセットアップする方法

インターネット上のチュートリアルとレッスンのほとんどは、WebSocketsを介してサーバーとブラウザを接続する方法についてです.このブログ記事では、WebSocketsを使用してサーバーを互いに接続したり、途中で少し説明したりできます.

WebSocketは何ですか？

WebSockets 双方向接続とHTTP経由で開始された通信プロトコルです.
これは、WebSocketsが常に接続されているので、サーバーとクライアントの両方が送信してメッセージに応答し、お互いに接続することができます新しい接続を作成することを意味します.
WebSocketはWebSocketにアップグレードしたいという両方のHTTP接続を必要とします.接続は、それからwebsocketsにアップグレードされます.すべてのwebsocket接続があるので、あなたはこれを見ることができますws:// の代わりにhttp:// URLで.
WebSocket接続はまた、生産で使用する安全な接続をサポートします.あなたがHTTPでのようにこれを見ることができますs . http であろうhttps and ws であろうwss . 安全でない接続で安全にミックスする必要もありません.一般的に、常にすべてを確保する.
この小さなチュートリアルでは、3つのサービスを互いに接続してメッセージを送信することです.また、ログを読みやすくするためにカラフルなログを追加します.また、開発のためのnodemonを使用します.

セットアップ

まずプロジェクトを作成しましょう.

mkdir websockets-tutorial
cd websockets-tutorial
npm init -y
git init

さあ、使用するパッケージを追加して、必要なファイルを作りましょう.

npm i -s chalk nodemon socket.io socket.io-client
touch service1.js service2.js service3.js

次のステップは、NPMスクリプトを作成することです.
オープンユアpackage.json 次のスクリプトを追加します.

  "scripts": {
    "start": "npm run service1 & npm run service2 & npm run service3",
    "service1": "nodemon service1.js",
    "service2": "nodemon service2.js",
    "service3": "nodemon service3.js"
  },

含意

まず、カラフルなログを出力するログ関数を書きましょう.
我々は輸入する必要があるchalk ファースト.

const chalk = require('chalk');

そして、我々は単純なlog 関数.

const log = (msg) => console.log(chalk.bold.green.bgBlack('Service1:'), chalk.white.bgBlack(`${msg}`))

我々はすべてのファイルで同じ機能を使用し、いくつかのことを変更する必要があります.コードの次の部分は、私が加えた場所で変更する必要があります[ ] アラウンド.

chalk.bold.[green].bgBlack('Service[1]:')

[green] 私はすべてのサービスともちろんのために別の色を取る[1] 数に変更する必要があります.

WebSocketサーバー

まず必要なパッケージをインポートしましょう.

const server = require('http').createServer();
const io = require('socket.io')(server, {
    path: '/'
});

ここでは、インポートhttp ノードからのサーバーsocket.io .
インsocket.io 着信接続のためにサーバが待機するパスを設定する必要があります.この場合、ルートパス/ .
ファイルの最後に次のコードを追加してサーバーにポートを聞きます.

server.listen(4000);
log('started server on port 4000')

Service 1ではポートは4000となり、Service 2ではポート5000となります.
さて、実際のコミュニケーションを実装しましょう.

io.on('connection', client => {
    log('someone connected');

    client.on('sayHello', data => {
        log(`event: sayHello, data: ${data}`)
        client.emit('halloToYouTo', 'Hello from http://localhost:4000')
    });

    client.on('disconnect', () => {
        log('client disconnected')
    });
});

さて、WebSocketsを扱っています.WebSocketsは常に接続されているので、我々は物事が起こって反応する必要があります.これがあなたが見る理由です.on() and .emit() ..on() 何かが起こるとき、機能が走るとあなたに示します.
例えば、io.on('connection', someFunction); . あなたの頭の中で翻訳することができますsomeFunction を実行します.
その中に次のコードがありますclient.on('sayHello', sayHelloFunction) . The sayHelloFunction クライアントが' sayHello 'イベントを発行した後に実行されます.我々.emit() ' Hallotoyouto 'イベント.これは、すべてのオープン接続に送信されます.それから、あなたはすでに何を理解してくださいdisconnect よろしいでしょうか.
ここでは、完全なコードですservice .jsファイル

const chalk = require('chalk');
const server = require('http').createServer();
const io = require('socket.io')(server, {
    path: '/'
});

const log = (msg) => console.log(chalk.bold.green.bgBlack('Service1:'), chalk.white.bgBlack(`${msg}`))

io.on('connection', client => {
    log('someone connected');

    client.on('sayHello', data => {
        log(`event: sayHello, data: ${data}`)
        client.emit('halloToYouTo', 'Hello from http://localhost:4000')
    });

    client.on('disconnect', () => {
        log('client disconnected')
    });
});

server.listen(4000);
log('started server on port 4000')

今すぐ実行することができますservie2.js .

const chalk = require('chalk')
const server = require('http').createServer();
const ioServer = require('socket.io')(server, {
    path: '/'
});
const ioClient = require('socket.io-client');

const log = (msg) => console.log(chalk.bold.cyan.bgBlack('Service2:'), chalk.white.bgBlack(`${msg}`))

だからここまで、コードはservice1.js . 唯一の変更は、我々が現在輸入しているということですsocket.io-client ASioClient .
次にサーバを再度設定します

// Server Code
ioServer.on('connection', client => {
    log('someone connected');
    client.on('sayHello', data => {
        log(`event: sayHello, data: ${data}`)
        client.emit('halloToYouTo', "hello from http://localhost:5000")
    });
    client.on('disconnect', () => {
        log('event: disconnect, client disconnected')
    });
});

これはservice1.js .
では、クライアントを実装しましょう.まずクライアントをinitalizeする必要があります.

// Client Code
const serverAddr = 'http://localhost:4000';
const socket = ioClient(serverAddr, {
    path: '/'
});

The serverAddr 接続したいサーバのアドレスでなければなりません.私たちの場合はservice1 住所でhttp://localhost:4000 . 接続するHTTPを必要としますが、最初の握手の後、接続はWebSocket接続にアップグレードされます.今、我々はそのセットアップを持って、我々は今接続し、我々が反応したいイベントを設定することができます.

socket.on('connect', (data) => {
    log(`connected to ${serverAddr}`);

    socket.emit('sayHello', 'Hello World from client');

    socket.on('halloToYouTo', data => {
        log(`event: helloToYouTo, ${data}`)
    });
});

ご覧の通り、これはサーバとほぼ同じです.私たちは.emit() and .on() . それで、我々がサーバーに接続しているとき、我々はそうします.emit() the sayHello イベントと我々が振り返るならばservice1.js それから、我々はそれがそのイベントを聞いていることを見ます、そして、それはhelloToYouTo イベント.それで、我々はメッセージを送りますservice1.js そして、メッセージを返しました.簡単、右?
オーケーここいっぱいですservice2.js

const chalk = require('chalk')
const server = require('http').createServer();
const ioServer = require('socket.io')(server, {
    path: '/'
});
const ioClient = require('socket.io-client');

const log = (msg) => console.log(chalk.bold.cyan.bgBlack('Service2:'), chalk.white.bgBlack(`${msg}`))

// Server Code
ioServer.on('connection', client => {
    log('someone connected');
    client.on('sayHello', data => {
        log(`event: sayHello, data: ${data}`)
        client.emit('halloToYouTo', "hello from http://localhost:5000")
    });
    client.on('disconnect', () => {
        log('event: disconnect, client disconnected')
    });
});

// Client Code
const serverAddr = 'http://localhost:4000';
const socket = ioClient(serverAddr, {
    path: '/'
});
socket.on('connect', (data) => {
    log(`connected to ${serverAddr}`);

    socket.emit('sayHello', 'Hello World from client');

    socket.on('halloToYouTo', data => {
        log(`event: helloToYouTo, ${data}`);
    });
});

server.listen(5000);
log('started server on port 5000');

今、我々は2つのサービスを接続する方法を知っている!
倉庫では、3つのサービスが表示されます!
何か違うことをしましょう!私が実装を説明する代わりに.私はそれをどのように動作を説明しようとすることができますコメントでファイルをダウンして表示されます!
だからここにservice3.js

const chalk = require('chalk')
const ioClient = require('socket.io-client');

const log = (msg) => console.log(chalk.bold.magenta.bgBlack('Service3:'), chalk.white.bgBlack(`${msg}`));

// Client Code
const clientAddr = 'http://localhost:5000';
const socket = ioClient(clientAddr, {
    path: '/'
});

socket.on('connect', (data) => {
    log(`connected to ${clientAddr}`);
    socket.emit('sayHello', 'Hello World from client');

    socket.on('halloToYouTo', data => {
        log(`event: halloToYouTo, data: ${data}`);
    });
});
log('started client ready');

これはあなたの出力がどのように見えるかです.

そして、あなたはレポを見つけることができますhere
👋よろしくMedium | |