xxx.s500

トップ | 最近の更新 | このサイトについて | rss2.0

[node.js] [soket.io] リアルタイムチャット

各バージョンは
node : 0.10.25
express : 4.13.1
socket.io : 1.3.7
以下インストールの流れ

$ mkdir chat
$ express -e chat
$ cd chat
$ npm install
$ npm install socket.io

bin/www の末尾に以下のソースを追記

var socketio = require( 'socket.io' ); 
var io = socketio.listen( server );
io.sockets.on( 'connection', function( socket ) {
  socket.on( 'message', function( data ) {
    io.sockets.emit( 'message', { value : data.value } );
  });
});

views/index.ejsを以下のものに書き換える

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
  <form>
    <input type="text" id="messageForm">
    <button type="button" id="sendMessageBtn">送信</button>
  </form>
  <div id="messageView"></div>
  <script type="text/javascript">
var ioSocket = io.connect( "http://localhost:3000" ); 

ioSocket.on( "message", function( data ) { 
  $("#messageView").append( "<div>" + data.value + "</div>" );
});

$("#sendMessageBtn").click( function() {
  var message = $("#messageForm").val();
  $("#messageForm").val("");
  ioSocket.emit( "message", { value : message } );
});
  </script>
</body>
</html>

サーバを起動する

$ node bin/www

ブラウザを2つ立ち上げて、両方ともlocalhost:3000にアクセスして動作確認する。