cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

続 Cloud9でチャットアプリのコードを書いて試しみる

「Cloud9があればIDEいらず?」の続編です。
せっかくなのでCloud9を利用してNode.jsで簡易チャットアプリをつくって試してみます。

Cloud9

環境確認

土台となるhtmlは下記の記事で作成したものを使います。

Cloud9のワークスペースはGitHubのプロジェクトを利用します。

Cloud9の簡単な使い方は「Cloud9があればIDEいらず?」を参考にして下さい。

利用するモジュールをインストール

expressとsocket.ioを利用します。
Nodeでチャットと言ったら定番ですね。
クライアント側はjQueryを利用します。

Cloud9のTeminalでインストールを行って下さい。

$npm install express socket.io --save-dev

server.jsとchat.jsも追加しておきます。

インストール後のディレクトリ構成です。

インストール後

htmlの調整

javascriptの読込と書き込みを行うフォームを追加しましょう。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="application.css" />
<!-- Javascript Start -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/chat.js"></script>
<!-- Javascript End -->
</head>
<body>
<!-- header -->
<header>
<h1>My Chat Service!</h1>
</header>
<!-- article -->
<article class="l-bucket">
<!-- section1 -->
<section class="l-tw-title">
<h2>メッセージ</h2>
<p>最近更新されたメッセージです!</p>
</section>
<!-- section2 -->
<section class="l-tw-message">
<ul class="l-tw-timeline">
    <li><input id="message" type="text" /><input id="post" type="submit" name="post" value="書き込み"></li>
</ul>
</section>            
</article>
</body>
</html>

サーバー側の作成

expressとhttpを読み込みます。
cloud9で気をつけなければいけない箇所は、IPアドレスとPortの設定部分です。
process.env.PORTとprocess.env.IPを利用して正しい値で設定して下さい。

/**********************
* 利用モジュールの読込 *
***********************/
var express = require("express");
var http = require("http");

/**********
* Express *
**********/
var app = express();
app.use(express.static(__dirname));
var server = http.createServer(app).listen(process.env.PORT || 3000, process.env.IP || "0.0.0.0", function(){
  var addr = server.address();
  console.log("Chat server listening at", addr.address + ":" + addr.port);
});

/************
* Socket.IO *
************/
var io = require("socket.io");
io = io.listen(server);
//イベント
io.sockets.on('connection',function(socket){
    //ログインした場合はIDを全員に通知
    io.sockets.emit('login',socket.id);
    console.log(socket.id,"connected!");
    //投稿処理
    socket.on('post',function(data){
        io.sockets.emit('post',{id:socket.id,post:data});
    });
});

クライアント側の調整

ログイン時の挨拶とコメント投稿時にサーバーへemitする処理を追加しています。

$(function(){
    //Socketの準備
    var socket = io.connect();
    //ログイン時の処理
    socket.on('login',function(data){
        $("ul.l-tw-timeline").prepend('<li>' + data + 'さんがログイン!</li>');
        console.log(data + 'さんがログイン!');
    });
    //投稿クリック
    $('#post').on('click',function(e){
        var message = $('#message').val();
        console.log(message + 'を投稿');    
        if(!message) return;
        //投稿処理
        socket.emit('post',message);
        $('input#message').val('');
    });
    //投稿内容をリストに反映
    socket.on('post',function(data) {
        $("ul.l-tw-timeline").prepend('<li>' + data.id + ' : ' + data.post + '</li>');
        console.log(data.id + 'さんが投稿!');
    });
});

起動して確認

$node server.js

問題なく起動するとデバック可能なURLが出力されます。

Cloud9  Your application is running at https://hogehoge.c9.io

アクセスして確認してみましょう。

チャット

リージョンが異なるのが原因なのかレスポンスが遅いですが、問題なく稼働しているのが確認できると思います。
Herokuを利用している人は簡単にデプロイ出来るので試してみるのも良いと思います。

Deploy

最後にgit add/commit/pushも忘れずに!

Add a Comment

メールアドレスが公開されることはありません。

Get Adobe Flash player