プロジェクトを作成(プロジェクト名 chat1)、ディレクトリに移動
$ mkdir chat1
$ cd chat1
Express(Ver 2.5.11)をインストール
$ sudo npm install -g [email protected]
password
$ express -v
2.5.11
※sudoをつけること。
Expressを使ってファイル生成（生成するディレクトリ名 chat）
$ express install -t ejs chat
たくさんできた。
create : chat
create : chat/package.json
create : chat/app.js
create : chat/public
create : chat/public/javascripts
create : chat/public/stylesheets
create : chat/public/stylesheets/style.css
create : chat/public/images
create : chat/routes
create : chat/routes/index.js
create : chat/views
create : chat/views/layout.ejs
create : chat/views/index.ejs
chatディレクトリに移動し、npm installコマンド実行
$ cd chat
$ npm install
Socket.io(ver 0.8.7)をインストール
$ npm install [email protected]
node_modules >socket.io というディレクトリができてたらOK
app.jsの編集 場所 chat1 > chat > app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Routes
app.get('/', routes.index);
app.listen(3000, function(){
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});
//※ここから追記
//socket
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket) {
//クライアント側からのイベントを受け取る。
socket.on('msg send', function (msg) {
//イベントを実行した方に実行する
socket.emit('msg push', msg);
//イベントを実行した方以外に実行する
socket.broadcast.emit('msg push', msg);
});
//接続が解除された時に実行する
socket.on('disconnect', function() {
log('disconnected');
});
});
ここから追記以降を追記
chat.jsファイルを新規作成 場所 chat1 > chat > public > javascripts > chat.js
$(function() {
var socket = io.connect('http://localhost');
socket.on('connect', function() {
console.log('connected');
});
$('#btn').click(function() {
var message = $('#message');
console.log(message);
//サーバーにメッセージを引数にイベントを実行する
socket.emit('msg send', message.val());
});
//サーバーが受け取ったメッセージを返して実行する
socket.on('msg push', function (msg) {
console.log(msg);
var date = new Date();
$('#list').prepend($('<dt>' + date + '</dt><dd>' + msg + '</dd>'));
});
socket.on('msg updateDB', function(msg){
console.log(msg);
});
});
layout.ejsを編集 場所 chat1 > chat > views > layout.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/javascripts/chat.js"></script>
</head>
<body>
<input type="text" name="message" id="message" />
<button id="btn">送信</button>
<dl id="list"></dl>
</body>
</html>
※ソースコードでは、"chat.js"が"sample.js"となっており、そのまま書いたためにプログラムが動かなかった。 ここには上で作った"chat.js"が入る。
サーバー起動
$ node app.js