Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

WebSocketを使用する理由

Websocket は、通常、リアルタイム通信に使用されるネットワーク通信プロトコルです。

Websocket プロトコルは http プロトコルに似ています。http プロトコルには、クライアント側からのみ開始でき、サーバー側はリクエスト URL と渡されたパラメータに基づいて対応する結果を返すという欠点があります。

Websocket は雙向通信です。Websocket 接続が確立されると、クライアントはサーバーにデータを送信でき、サーバーもクライアントにデータを積極的に送信できます。

Websocket は、Web チャットルーム、Web カスタマーサービス、インスタントメッセージングなど、フロントエンドとバックエンドが頻繁にデータを交換するシナリオに適用できます。

ソケット.io

高性能、高信頼性、スケーラビリティを備えた双方向かつ低遅延の Websocket 通信パッケージです。
(簡単に言うと、WebSocketをカプセル化して最適化することです。)

ここに画像の説明を挿入

Socket.IO は、ブラウザとサーバー間のリアルタイム、双方向、イベントベースの通信を可能にするライブラリです。含まれるもの:

サーバ
クライアント

ここに画像の説明を挿入

公式サイト
https://socket.io/
公式ドキュメント
詳しくはこちら

オープンソースプロジェクト

以下のコードと時間項目はオープンソースプロジェクト[nodejs-study]で公開されます。ダウンロードして学習してください。

効果プレビュー

サービスを実行するためにnode appに入ったら、http://localhost:3000/ からアクセスできます。ポート 3000 を listen している出力が表示され、フロントエンドに hello world が表示されたら、プロジェクトは正常に開始されています。

ここに画像の説明を挿入

フロントエンドページ: 送受信機能を含むチャット UI ボックス http://localhost:3000/test

ここに画像の説明を挿入

バックグラウンド Websocket: リスニングと応答

ここに画像の説明を挿入

アプリ

まず、expressとsocket.ioライブラリをインストールする必要があります

npm install express --saveまたはyarn add express入力します。

npm install socket.io--saveまたはyarn add socket,io入力します。

次に、2 つのパス/と/test

/ Hello Worldに戻る
/test HTML接続ページに戻ります

socket.on ("チャットメッセージ", コールバック関数)
フロントエンドとバックエンドが同じチャネルである限り、「チャットメッセージ」チャネルの監視を開始することを示します。

socket.emit ("チャットメッセージ", msg.toUpperCase());
この「チャットメッセージ」チャンネルへの返信を示します。英語の文字を一時的に大文字にして返します。

定数 express = require('express');
express() は、定数です。
定数 http = require('http');
定数 server = http.createServer(app);
const { Server } = require("socket.io");
const io = 新しい Server(server);

app.get('/', (req, res) => {
    res.send('<h1>Hello world</h1>');
  });

app.get('/test', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// io.on('接続', (ソケット) => {
// console.log('ユーザーが接続しました');
// });
//zhengkai.blog.csdn.net より
//socket.on 情報と socket.emit 応答情報を処理します //ここで、受信したメッセージを大文字にします io.on('connection', (socket) => {
    //Socket.io (zhengkai.blog.csdn.net より)
    socket.on('チャットメッセージ', (msg) => {
      console.log('受信: ' + メッセージ);
      socket.emit("チャットメッセージ", msg.toUpperCase());
    });
  });
//ポート3000でリッスン
server.listen(3000, () => {
  console.log('*:3000 でリッスンしています');
});

インデックス.html

これはいくつかのスタイル設定が行われ、次の本文コンテンツが含まれます。

メッセージの ul は、トランザクションの記録を表示するための li 情報を追加するために使用できます。
送信する情報を提出するためのフォーム

スクリプト部分については、まず公式の socket.io js クライアントを使用して接続を初期化し、リスニングイベントを追加します。

空でないコンテンツを入力して送信すると、その情報はWebSocketバックエンドに送信され、情報リストにも出力されます。
メッセージを受信すると、メッセージリストに表示されます。

<!DOCTYPE html>
<html>
  <ヘッド>
    <title>Socket.IO チャット</title>
    <スタイル>
      本文 { マージン: 0; パディングボトム: 3rem; フォントファミリ: -apple-system、BlinkMacSystemFont、"Segoe UI"、Roboto、Helvetica、Arial、sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { アウトライン: なし; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { リストスタイルタイプ: なし; マージン: 0; パディング: 0; }
      #メッセージ > li { パディング: 0.5rem 1rem; }
      #メッセージ > li:nth-child(odd) { 背景: #efefef; }
    </スタイル>
  </head>
  <本文>
    <ul id="メッセージ"></ul>
    <フォームid="フォーム" アクション="">
      <input id="input" autocomplete="off" /><button>送信</button>
    </フォーム>
  </本文>
  <script src="/socket.io/socket.io.js"></script>
  <スクリプト>
    var ソケット = io();
    
    var メッセージ = document.getElementById('メッセージ');
    var フォーム = document.getElementById('フォーム');
    var 入力 = document.getElementById('入力');

    //画面に出力 function addMessage(str){
        li = document.createElement("li") の定数。
        li.innerHTML = str;
        メッセージ.appendChild(li); 
        
    }
    // console.log(フォーム)
    form.addEventListener('submit', 関数(e) {
      e.preventDefault();
      if (入力値) {
        //Socket.io (zhengkai.blog.csdn.net より)
        let msg = 'メッセージを送信:' + input.value;
        コンソール.log(メッセージ)
        socket.emit('チャットメッセージ', input.value);
        メッセージを追加します(メッセージ);
        //入力ボックスをクリアします//input.value = '';
      }
    });
    socket.on("チャットメッセージ", (arg) => {
        let msg = 'メッセージを受信:' + arg;
        console.log(msg); // ワールド
        メッセージを追加します(メッセージ);
    }); 
  </スクリプト>
  
</html>

これで、Node.js と Socket.IO を組み合わせて Websocket インスタントメッセージングを実装する方法についての説明は終わりです。Node.js の Websocket インスタントメッセージングに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: