モジュールのインストール
それでは始めましょう！ まず、 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'); // express var app = express(); var server = require('http').Server(app); // http app var io = require('socket.io')(server); // socket.io var log4js = require('log4js'); // var logger = log4js.getLogger(); // log4js
最初に接続する必要があるのはこれだけです。 次に、リスニング用のポートを指定する変数を作成します（サーバー用） ：
var port = 3000; //
その後、次の方法でスクリプトの開始をプログラムできます。
logger.debug('Script has been started...'); // .
次に、この方法でサーバーの「盗聴」にポートを配置します。
server.listen(port); // localhost:3000
ここで、 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')); // "" public // __dirname - chat.js
素晴らしい、今は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> <!-- main.css --> </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; // var socket = io.connect('http://localhost:' + port); // "socket" ( )
ポートを介してサーバーに接続socket.ioを書き込んだので、今度はサーバーでこのイベントを処理します。
io.connect（ポート） -イベント 'connection'を発生させます。サーバーでハンドラーを作成する必要があります。そうでない場合、接続は*空*になり、接続した人にニックネームを割り当てる必要があります。これはハンドラーで行われます。
chat.jsスクリプトでハンドラーを作成します
io.on('connection', function (socket) { // 'connection' io.connect(port); socket var name = 'U' + (socket.id).toString().substr(1,4); // . 'U' 3 ID () , '+' socket.broadcast.emit('newUser', name); // 'newUser' , . 'newUser' ( ) socket.emit('userName', name); // 'userName' (name) ( ) logger.info(name + ' connected to chat!'); // });
だから、理解していない人のために... 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){ // 'userName' name 'userName' console.log('You\'r username is => ' + userName); // $('textarea').val($('textarea').val() + 'You\'r username => ' + userName + '\n'); // }); socket.on('newUser', function(userName){ // =) console.log('New user has been connected to chat | ' + userName); // $('textarea').val($('textarea').val() + userName + ' connected!\n'); // , ' ' });
$（ 'textarea'）。val（ 'text'）; -テキストボックスのテキストを変更します。 \ n-新しい行に移動します
localhost：3000を開くと、ニックネームが付いたフィールドにカウンターテキストが表示されます。 いい？ 私は知っています^^しかし、あなたは認めなければなりません、これはまだチャットではありません。 次に、 「送信」<= index.htmlボタンをクリックしたときに、テキストがサーバーに送信されることを確認する必要があります。 これを行うには、 「main.js」の jQueryを介して「ボタン」ボタンにハンドラーを追加します。
$(document).on('click', 'button', function(){ // var message = $('input').val(); // socket.emit('message', message); // 'message' c (message)- $('input').val(null); // '' });
その後、サーバー自体で '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); // // socket.on('message', function(msg){ // 'message' (msg) message logger.warn('-----------'); // Logging logger.warn('User: ' + name + ' | Message: ' + msg); logger.warn('====> Sending message to other chaters...'); io.sockets.emit('messageToClients', msg, name); // 'messageToClients' (, ) }); });
いいね！ ページからテキストを送信すると、ノードコンソールにログが記録され、すべてのクライアントにmessageToClientsイベントも送信されました。クライアントでこのイベントのハンドラーを実行します...
main.js：
socket.on('messageToClients', function(msg, name){ console.log(name + ' | => ' + msg); // $('textarea').val($('textarea').val() + name + ' : '+ msg +'\n'); // ( : ) });
チャットの準備ができました！ これで、必要に応じてアップグレードできます。
この投稿は、Habrが5年前にチャットを作成したときに作成したトピックのために作成されました。この間に多くのことが起こり、自分のトピックを作成することにしました） たぶん私はどこかで間違っていた、正しい！ すべての人が間違っています。
ご清聴ありがとうございました！