みなさん、こんにちは、カブラハブリテス！ 最近、node.jsの研究を開始し、最も興味深い部分である
Socket.Ioに到達しました 。 インターネット上の情報を調べたが、このモジュールの詳細な「ガイド」を見つけることができなかったので、自分で掘り下げなければなりませんでした。 モジュールの
ウェブサイトに書かれ
ていることを自分で理解できると言う人もいますが、ウェブソケットの基礎を理解するのに十分ではない人もいるので、そのような人々、つまり最も「明確な」例-チャットでこの記事を書くことにしました。
モジュールのインストール
それでは始めましょう！ まず、
Socket.Ioを実際にインストールする必要があります。インストール方法は
こちらで確認できますが、理解できない人のために、
クライアントと
サーバーがあります。コンソールでそれをインストールしてからインストールします）：
npm install socket.io --save
モジュールをインストールすると、フォルダー
「node_modules」がプロジェクトフォルダー（
インストールされた場所 ）
に表示されます
ここで、モジュールの.jsファイルをプロジェクトフォルダーにインストールする必要があります
（.jsファイルはクライアントで使用されます） 。
ここから =>
* tyk *を設定
します 。 アーカイブを
ダウンロードすると、そこから
「socket.io.js」ファイルを取得して、プロジェクトフォルダーに転送する必要があります。
理解していない人のために、チャットのあるプロジェクトフォルダーの構造は、現時点では次のようになっているはずです。
チャット：（フォルダー自体）
| node_modules
| --socket.io（<i> node_modules </ i>内）
| socket.io.js
.jsファイルをダウンロードしてモジュールをインストールしたら、次の手順に進むことができます。
追加モジュールのインストール
次のようなモジュールも必要です。
1.
express ＃サーバーを作成するには2.log4js ＃素晴らしいロガー3.
http ＃httpサーバー自体エクスプレス：
npm install express --save
log4js：
npm install log4js
http：
npm install http
これらすべての手順の後、
「node_modules」フォルダーを補充する必要があります（
*論理的に、*のように ）。 これでチャットの開発を開始できます！
チャット開発
これで開発を開始できますが、その前に、チャットを作成するプロジェクトディレクトリ
「chat.js」に.jsファイルを作成する必要があります。 まず、
chat.jsを開き、次の方法ですべてのモジュールを接続します。
var express = require('express');
最初に接続する必要があるのはこれだけです。 次に、リスニング
用のポートを指定する変数を作成します
（サーバー用） ：
var port = 3000;
その後、次の方法でスクリプトの開始をプログラムできます。
logger.debug('Script has been started...');
次に、この方法でサーバーの「盗聴」にポートを配置します。
server.listen(port);
ここで、
localhost：3000サーバーに接続するクライアントが
index.htmlなどのファイルのパッケージを受信することを確認する必要があります
。 main.css; socket.io; main.js; チャットのあるページが表示されるようにします。
これは単純に行われ、プロジェクトのルートに
「パブリック」フォルダーを作成し、
そこに
「socket.io.js」を
ドロップして
から 、index.html、main.js、
main.cssなどのファイルを作成します
（これは使用しません）可視性） 。 プロジェクト構造は次のようになります。
チャット：
| node_modules：
| -socket.io
|-エクスプレス
| -log4js
| -http
|公開：
| -index.html
| -socket.io.js
|-<i> main.css </ i>
| -main.js
| chat.js
次に、接続時にこのフォルダーの内容をクライアントに送信するような「フェイント」を作成します。
chat.js：
app.use(express.static(__dirname + '/public'));
素晴らしい、今は
localhost：3000 （スクリプトの実行中）に接続する
ときに "index.html"を開きます。
"index.html"が空であるため、ページのみが空になります:)
「index.html」 （スタイルなし）でチャットをスケッチします。 コードを
「index.html」にコピーするだけです
<html> <head> <meta charset="utf-8"> <title>chat</title> <script src="socket.io.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js" charset="utf-8"></script> <script src="main.js" charset="utf-8"></script> </head> <body> <textarea name="name" rows="8" cols="40"></textarea> <p></p> <input type="text" name="text" size="20"> <button type="button" name="button"></button> </body> </html>
いいね！ スクリプトを実行して
localhost：3000を開くと、*カーブ*スケッチが表示されます）jQueryを接続したこともわかります。おかげで、「便利な」フィールドからテキストを抽出できます。
理解できるように、現在チャットは機能していません。スクリプトで構成されていないイベントの数。 次に、すべてを分解します。 まず、
「main.js」でクライアントからサーバー（socket.io）に接続する必要があります
var port = 3000;
ポートを介してサーバーに接続socket.ioを書き込んだので、今度はサーバーでこのイベントを処理します。
io.connect（ポート） -イベント 'connection'を発生させます。サーバーでハンドラーを作成する必要があります。そうでない場合、接続は*空*になり、接続した人にニックネームを割り当てる必要があります。これはハンドラーで行われます。
chat.jsスクリプトでハンドラーを作成します
io.on('connection', function (socket) {
だから、理解していない人のために...
io.on（ 'event'、function（arg）{}） -引数argでイベント 'event'の盗聴を作成します。 引数を少し後に渡します）
socket.id-このソケットの接続ID
（ソケット-クライアント） 、
socket.broadcast.emit（ 'newUser'、name）; -イベント 'newUser'を変数名（現在のソケット）で現在のソケット以外の全員に送信します。
socket.emit（ 'userName'、name）; -イベント「userName」を変数名を持つ現在のソケットにのみディスパッチします。
理解していない人のために-サーバーとクライアントは同じ方法でイベントを送受信できます：
socket.emit（ 'event'） -サーバー\クライアントに送信
socket.on-クライアントでイベントをリッスンします
io.on-サーバー上のイベントをリッスンします
「main.js」で 、「newUser」、「userName
」の盗聴を作成します...
socket.on('userName', function(userName){
$（ 'textarea'）。val（ 'text'）; -テキストボックスのテキストを変更します。
\ n-新しい行に移動します
localhost：3000を開くと、ニックネームが付いたフィールドにカウンターテキストが表示されます。 いい？ 私は知っています^^しかし、あなたは認めなければなりません、これはまだチャットではありません。 次に、
「送信」<= index.htmlボタンをクリックしたときに、テキストがサーバーに送信されることを確認する必要があります。 これを行うには、
「main.js」の jQueryを介して「ボタン」ボタンにハンドラーを追加します。
$(document).on('click', 'button', function(){
その後、サーバー自体で 'message'イベントハンドラーを安全に実行できます。
chat.js：
io.on('connection', function (socket) { var name = 'U' + (socket.id).toString().substr(1,4); socket.broadcast.emit('newUser', name); logger.info(name + ' connected to chat!'); socket.emit('userName', name);
いいね！ ページからテキストを送信すると、ノードコンソールにログが記録され、すべてのクライアントにmessageToClientsイベントも送信されました。クライアントでこのイベントのハンドラーを実行します...
main.js：
socket.on('messageToClients', function(msg, name){ console.log(name + ' | => ' + msg);
チャットの準備ができました！ これで、必要に応じてアップグレードできます。
この投稿は、Habrが5年前にチャットを作成したときに作成したトピックのために作成されました。この間に多くのことが起こり、自分のトピックを作成することにしました） たぶん私はどこかで間違っていた、正しい！ すべての人が間違っています。
ご清聴ありがとうございました！