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 デザインのヒント: ページ レイアウトの簡単なルール
コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...
このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...
今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...
1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...
序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...
序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...
この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...
目次ドラッグアンドドロップアップロードについては以前の記事で書きました。ファイルをアップロードするF...
目次1. 現在のデータベース内のテーブルを表示する2. テーブルを作成する3. 指定されたテーブル構...
この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...
問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...
これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...