NowJSをつかったリアルタイムチャットつくろうとしたがサンプルが動いた

multiroomchatのexampleコードはうごいた。
今後の課題は、

同画面にいくつかのレーンがあるチャットにする
カメラを操作
データベースとの連携

など

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

http://tohae.hatenablog.com/entry/20110905/1315238566
を参考に
違うチャットexampleを動かそうとnodeをインストールしたらエラー

どうやら、node-proxy 6.0がはいらない
それが依存してるnode-gyp-0.4.4が入らないらしい

npm ERR! Refusing to delete: /usr/bin/node-gyp not in /usr/lib/node_modules/node-gyp
npm ERR! File exists: /usr/bin/node-gyp
npm ERR! Move it away, and try again.

というので、
/usr/bin/node-gypを消してみた。
ただのシンボリックリンクだったし

やっぱりうまくいかなかったので、
既存のディレクトリをコピーした

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

結構意味わからないながらも動いた

コードを見てみると、

サーバ側

everyone.now.distributeMessage = function(message){
  everyone.now.receiveMessage(this.now.name, message);
};

クライアント側

<script>
    $(document).ready(function(){

      now.receiveMessage = function(name, message){
        $("#messages").append("<br>" + name + ": " + message);
      }

      $("#send-button").click(function(){
        now.distributeMessage($("#text-input").val());
        $("#text-input").val("");
        $("#text-input").focus();
      });

      now.name = prompt("What's your name?", "");

    });
</script>

みたいになってて、
クライアント側でボタンが押される
↓
サーバ側のメソッドeveryone.now.distributeMessage()に記入内容を渡して実行
↓
everyone.now.distributeMessage()が
クライアント側のnow.receiveMessage()に記入内容を渡して実行

という具合にサーバ側とクライアント側が入り乱れる感じ

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

これなら、結構簡単に複数の部屋の並列チャットができるのでは？

クライアント側

複数の「部屋」を用意してidを振っとく

サーバ側

メッセージが来たら、部屋のidをチェックして、そのidの部屋に配信

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

まず、部屋をいきなり用意する感じに改造

サーバ側 app.js

略
everyone.now.distributeMessage = function(message,id){
everyone.now.receiveMessage(this.now.name, message, id);
};

クライアント側 index.ejs

<div id="intro" style="position:relative; right: 0; top:0; width="25%" height="100%">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p>This is an example of an embedded chat window added to any site. </p>
</div>
<div id="options" style="position:relative; right: 0; top:0; width="25%" height="100%">
<a href='#' class='select_room' id='1'>room 1</a>
<a href='#' class='select_room' id='2'>room 2</a>
<a href='#' class='select_room' id='3'>room 3</a>
</div>
<div id="rooms" style="position:relative; right: 0; top:0; width="25%" height="100%">

</div>
<script>
    $(document).ready(function() {
      $('.select_room').click(function(e) {
          e.preventDefault();
          var id = $(this).attr('id');
          if($('#room'+id).size() == 0){
             $('<div class="room" id=room'+id+' style="height:auto"><h2>Room '+id+'</h2><div id="messages'+id+'"></div><div style="position: relative; bottom: 25;"><input type="text" id="text-input'+id+'"><input type="button" value="Send" class="send-button" id="send-button'+id+'"></div>').appendTo('#rooms');
          }else{
         
          }
      });
     
      now.receiveMessage = function(name, message, id){
        $("#messages"+id).append("<br>" + name + ": " + message);
      }

      $(".send-button").live("click",function(){
        var id = $(this).attr('id').replace('send-button','');
        now.distributeMessage($("#text-input"+id).val(),id);
        $("#text-input"+id).val("");
        $("#text-input"+id).focus();
      });

      now.name = prompt("What's your name?", "");

    });
   

</script>

動きました。

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

mysqlにログを残すようにする。

http://linux.kororo.jp/cont/server/mysql_user.php
ここを参考にmysql ユーザ を作る

サーバ側

// サーバのアドレスとポート
var HOSTNAME = 'localhost';
var PORT = XXXX;

// MySQL データベース名、ユーザー名、パスワード
var DBNAME = 'XXXX';
var DBUSER = 'XXXX';
var DBPASSWD = 'XXXX';

var express = require('express'),
    mysql = require('mysql');

var app = express.createServer();

// Configuration

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');



// Routes

app.get('/', function(req, res){
  res.render('index', {locals: {
    title: 'NowJS + Express Example'
  }});
});




app.listen(PORT);
console.log("Express server listening on port %d", app.address().port);


// NowJS component
var nowjs = require("now");
var everyone = nowjs.initialize(app);


nowjs.on('connect', function(){
      console.log("Joined: " + this.now.name);
});


nowjs.on('disconnect', function(){
      console.log("Left: " + this.now.name);
});

everyone.now.distributeMessage = function(message,id){
  everyone.now.receiveMessage(this.now.name, message, id);
 
  //mysqlDBにメッセージログを入れる
  var client = mysql.createClient({user: DBUSER, password: DBPASSWD, database: DBNAME});
  var values = [ this.now.name, message, id ];
  client.query(
     'INSERT INTO `log` (`name`, `message`, `room_id`) VALUES (?, ?, ?);',
     values,
     function(err, results, fields) {
        if(!err){
       
        }else{
         console.log(err);
         console.log(results);
        }
       
     }
  );
};

動いた
しかし、最初の接続がやたら遅くなった？