続 Cloud9でチャットアプリのコードを書いて試しみる
「Cloud9があればIDEいらず？」の続編です。
せっかくなのでCloud9を利用してNode.jsで簡易チャットアプリをつくって試してみます。
環境確認
土台となる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を利用している人は簡単にデプロイ出来るので試してみるのも良いと思います。
最後にgit add/commit/pushも忘れずに!
このページを読んだ人にオススメのブログ記事です！
About The Author
