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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • NodejsとReactでシンプルなインスタントメッセージングチャットルームの機能を実現する
  • NodeJs はシンプルな WebSocket インスタント メッセージングのサンプル コードを実装します
  • MQTT プロトコルを使用して Node.js でインスタント メッセージングとオフライン プッシュを実現する方法
  • Node.jsとSocket.IOを組み合わせて実装したインスタントメッセージング機能の詳細な説明
  • JavaScript でインスタント メッセージングを実装する 4 つの方法

<<:  CSS で適応型ディバイダーを巧みに実装する N 通りの方法

>>:  Web デザインのヒント: ページ レイアウトの簡単なルール

推薦する

HTML要素によるFlashブロックの詳細な例

コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...

HTMLとリソースがどのように読み込まれるかを理解します

このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...

docker runコンテナの自動終了の解決策

今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...

HTML のフォームフォームのメソッド属性の紹介

1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...

Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...

jQueryは画像追従効果を実現します

この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...

K8Sの5つのコントローラーの紹介と使用

目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...

Vue+flaskで動画合成機能を実現(ドラッグ&ドロップアップロード)

目次ドラッグアンドドロップアップロードについては以前の記事で書きました。ファイルをアップロードするF...

MySQLデータベースのデータテーブルに関する詳細な基本操作

目次1. 現在のデータベース内のテーブルを表示する2. テーブルを作成する3. 指定されたテーブル構...

期間限定フラッシュセール機能を実現するJavaScriptタイマー

この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...