Clever Geek Handbook

Node.jsとSocket.IOでチャットを作成する

この記事では、Node.jsとSocket.IOを使用して簡単なチャットを作成する方法を示します。 当初は、純粋なWebsocketでチャットを構築したかったのですが、インターネット上でそれらを使用するための既製のサーバー実装がほとんど完全に欠けていることに気付きました。 そこで、車輪を再発明するのではなく、既製のライブラリを使用することにしました。

私の場合、サーバーはUbuntuの下で実行されるため、すべての例がそのサーバー用になります（例のリンクはそれになります）。



コンポーネントのインストール


まず、Node.js自体（インストール手順とダウンロードリンクはこちら ）とSocket.IOが必要です。 Node.jsのモジュールは、npmマネージャーを使用してインストールするのが最も簡単です- 

curl http://npmjs.org/install.sh | sh npm install socket.io


サーバー側


サーバー側の構造は次のとおりです。サーバーは、コマンドである場合、メッセージを受け入れます-特定のアクションを実行し、メッセージのみである場合、他のすべての参加者に送信します。 

 //       8080- - 80    http- var io = require('socket.io').listen(8080); //     -   production' io.set('log level', 1); //       io.sockets.on('connection', function (socket) { // ..   -       5   ID  var ID = (socket.id).toString().substr(0, 5); var time = (new Date).toLocaleTimeString(); //     ,        socket.json.send({'event': 'connected', 'name': ID, 'time': time}); //    ,        socket.broadcast.json.send({'event': 'userJoined', 'name': ID, 'time': time}); //      socket.on('message', function (msg) { var time = (new Date).toLocaleTimeString(); //  ,        socket.json.send({'event': 'messageSent', 'name': ID, 'text': msg, 'time': time}); //      socket.broadcast.json.send({'event': 'messageReceived', 'name': ID, 'text': msg, 'time': time}) }); //    -   socket.on('disconnect', function() { var time = (new Date).toLocaleTimeString(); io.sockets.json.send({'event': 'userSplit', 'name': ID, 'time': time}); }); });


このコード（およびそれ以上）：

io.sockets-接続されているすべてのクライアントを選択します

io.sockets.sockets [ID]-ID IDを持つ特定のクライアントの選択

ソケット -「現在の」クライアントを選択します

socket.send（TEXT）-TEXTメッセージを送信する「基本」イベント

socket.json.send（{}） -JSON形式でメッセージを送信する

socket.broadcast.send-現在のクライアントを除くすべてのクライアントにメッセージを送信します

socket.emit（EVENT、JSON）-JSONデータ（たとえば、socket.emit（ 'whereami'、{'location'：loc}）を含むカスタムEVENTイベントを送信し、標準イベント 'connected'、 'message'を書き換えるために使用できますおよび「切断」。

socket.on（EVENT、CALLBACK）-EVENTイベントが発生したときにCALLBACK関数を呼び出します（たとえば、socket.on（ 'whereami'、function（loc）{console.log（ 'I \' m in '+ loc +'！ '） ;}））

JSONでクライアントにメッセージを渡すのは、 メッセージテキスト自体はクライアントで自動的に生成されます。 したがって、データの表示はサーバーに依存せず、触れることなく簡単に変更できます（たとえば、言語を変更します）。 さらに、サーバーとクライアントの間で転送されるデータ量が少なくなります。



クライアント部


HTMLとCSS


index.html： 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href="style.css" rel="stylesheet"> <script src="http://46.182.31.65:8080/socket.io/socket.io.js"></script> <script src="client.js"></script> </head> <body> <div id="log"></div><br> <input type="text" id="input" autofocus><input type="submit" id="send" value="Send"> </body> </html>


style.css 

 #log { width: 590px; height: 290px; border: 1px solid rgb(192, 192, 192); padding: 5px; margin-bottom: 5px; font: 11pt 'Palatino Linotype'; overflow: auto; } #input { width: 550px; } #send { width: 50px; } .in { color: rgb(0, 0, 0); } .out { color: rgb(0, 0, 0); } .time { color: rgb(144, 144, 144); font: 10pt 'Courier New'; } .system { color: rgb(165, 42, 42); } .user { color: rgb(25, 25, 112); }


Javascript


socket.io.jsは、nodeJsIp [：port] /socket.io/socket.io.jsでNode.jsに自動的に与えられます。他に何もする必要はありません。

client.js 

 //      strings = { 'connected': '[sys][time]%time%[/time]:       [user]%name%[/user].[/sys]', 'userJoined': '[sys][time]%time%[/time]:  [user]%name%[/user]   .[/sys]', 'messageSent': '[out][time]%time%[/time]: [user]%name%[/user]: %text%[/out]', 'messageReceived': '[in][time]%time%[/time]: [user]%name%[/user]: %text%[/in]', 'userSplit': '[sys][time]%time%[/time]:  [user]%name%[/user]  .[/sys]' }; window.onload = function() { //    ; websockets -    ,  xhr if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) { socket = io.connect('http://46.182.31.65:8080', {'transports': ['xhr-polling']}); } else { socket = io.connect('http://46.182.31.65:8080'); } socket.on('connect', function () { socket.on('message', function (msg) { //    ,  ,      document.querySelector('#log').innerHTML += strings[msg.event].replace(/\[([az]+)\]/g, '<span class="$1">').replace(/\[\/[az]+\]/g, '</span>').replace(/\%time\%/, msg.time).replace(/\%name\%/, msg.name).replace(/\%text\%/, unescape(msg.text).replace('<', '&lt;').replace('>', '&gt;')) + '<br>'; //     document.querySelector('#log').scrollTop = document.querySelector('#log').scrollHeight; }); //   <Enter>     document.querySelector('#input').onkeypress = function(e) { if (e.which == '13') { //   input',   escape- socket.send(escape(document.querySelector('#input').value)); //  input document.querySelector('#input').value = ''; } }; document.querySelector('#send').onclick = function() { socket.send(escape(document.querySelector('#input').value)); document.querySelector('#input').value = ''; }; }); };




最後に、ファイルとバックグラウンドでログを使用してサーバーを起動します- 

 node server.js > output.log &


（スクリプトがnode.jsがインストールされたユーザーディレクトリからのみ起動されたことに注意する価値があります）



すべてのソースはここからダウンロードできます 。 私はすぐに私がプログラミングの第一人者ではなく自分のために書いたと言うので、私はあなたに不器用さを誓わないように頼みます（そしてそれは役に立たないです）。 なぜなら Apacheは静的を提供しますが、コンピューターで実行することをお勧めします。 怠や不便/できない場合は、 ここでライブの例を見ることができます 。



コードはテストされており、Opera 11 +、Firefox 5 +、Chrome 12+で動作します。 ログから判断すると、IE9はパケットの接続、受信、送信を行いますが、これはブラウザーには影響しません。



使用した材料：

socket.io/#how-to-use

github.com/LearnBoost/Socket.IO/wiki/Migrating-0.6-to-0.7

google.com



次の号では、メッセージ履歴を記録し、名前を変更し、他のプレイヤーに非公開で書きます。


More articles:


All Articles