WebSocketを使用する理由Websocket は、通常、リアルタイム通信に使用されるネットワーク通信プロトコルです。 Websocket プロトコルは http プロトコルに似ています。http プロトコルには、クライアント側からのみ開始でき、サーバー側はリクエスト URL と渡されたパラメータに基づいて対応する結果を返すという欠点があります。 Websocket は Websocket は、Web チャット ルーム、Web カスタマー サービス、インスタント メッセージングなど、フロントエンドとバックエンドが頻繁にデータを交換するシナリオに適用できます。 ソケット.io高性能、高信頼性、スケーラビリティを備えた双方向かつ低遅延の Websocket 通信パッケージです。 Socket.IO は、ブラウザとサーバー間のリアルタイム、双方向、イベントベースの通信を可能にするライブラリです。 含まれるもの:
公式サイト オープンソースプロジェクト以下のコードと時間項目はオープンソースプロジェクト[nodejs-study]で公開されます。ダウンロードして学習してください。 効果プレビューサービスを実行するために フロントエンドページ: 送受信機能を含むチャット UI ボックス http://localhost:3000/test バックグラウンド Websocket: リスニングと応答 アプリまず、expressとsocket.ioライブラリをインストールする必要があります
次に、2 つのパス
定数 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これはいくつかのスタイル設定が行われ、次の本文コンテンツが含まれます。
スクリプト部分については、まず公式の socket.io js クライアントを使用して接続を初期化し、リスニング イベントを追加します。
<!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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS で適応型ディバイダーを巧みに実装する N 通りの方法
>>: Web デザインのヒント: ページ レイアウトの簡単なルール
文法規則 列名を選択 テーブル名1から INNER JOIN テーブル名2 ON テーブル名1.列名...
VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...
目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...
01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...
序文最近mysql /usr/local/mysql/bin/mysql -uroot -pパスワー...
CSS の無効な行の高さ設定についてまず、次のコード文字列を記述します。 <!DOCTYPE ...
デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...
この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...
複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...
問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...
出典: http://www.ruoyi.vip/ 'vue' から Vue をイン...
コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...