ズッキーニのプログラミング実験場

プログラミング + アカデミック + 何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

   Aug 14

[express][socket.io]チャットデモのコードを見てみる

by zuqqhi2 at 2013年8月14日
Pocket

参考記事


※この記事は、ただの上記のリンク先の記事を読んだメモです。

1.レシーバーの記述

サーバに対してlistenするから、app.jsの末尾のあたりに以下のように記述すれば良いみたい。

"use strict";
var express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);

var server = http.createServer(app);
server.listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

//=================================================================
//socket.ioのインスタンス作成
var io = require('socket.io').listen(server);

//クライアントから接続があった時
io.sockets.on('connection',function(socket){
	//クライアントからmessageイベントが受信した時
	socket.on('message',function(data){
		//念のためdataの値が正しいかチェック
		if(data && typeof data.text === 'string'){
			//メッセージを投げたクライアント以外全てのクライアントにメッセージを送信する。
			socket.broadcast.json.emit('message',{text:data.text});
		}
	});
});

ちゃんと書くなら処理内容はモデル化してuseした方が良さそう。

2.ビュー

サーバ部分は実装出来たから後はクライアント部分。
参考記事のサンプルでは以下のようにビュー(routes/index.jsのビュー)でjavascriptを読み込んで、そこで処理してる。

<!DOCTYPE html>
<html>
  <head>
    <title>チャットサンプル</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-1.8.0.js"></script>
<script src="/javascripts/client.js"></script>
  </head>
  <body>
    <h1>チャットサンプル</h1>
    <div><input type="text" id="input" /><button id="send">send</button></div>
<div id="list"></div>
  </body>
</html>
jQuery(function($) {
	"use strict";
	//socket.ioのサーバにに接続
	var socket = io.connect('http://'+location.host+'/');
	
	//サーバからmessageイベントが送信された時
	socket.on('message',function(data){
		$('#list').prepend($('<div/>').text(data.text));
	});
	//sendボタンがクリックされた時
	$('#send').click(function(){
		var text = $('#input').val();
		if(text !== ''){
			//サーバにテキストを送信
			socket.emit('message',{text:text});
			$('#list').prepend($('<div/>').text(text));
			$('#input').val('');
		}
	});
});

3.実行結果

result

Related Posts

  • 2013年7月28日 [node.js][express][coffeescript] RESTful API part1 やりたいこと node.jsとexpressとcoffeescriptでRESTfulなAPIを作りたい。 環境準備 Coffee Scriptでモデルを書く リクエストラインをValidateするモデルを作ってみる。 […]
  • <!--:ja-->[node.js][express]CPUとヒープのスナップショットを撮る<!--:--><!--:en-->[node.js][exprees]How to take snapshot of CPU and Heap<!--:-->2014年8月31日 [node.js][express]CPUとヒープのスナップショットを撮る 概要 node.jsでアプリを作成しているとメモリリーク(やCPUの負荷)に悩まされることが多い。 多くはスナップショットを撮ってボトルネックを見つけて改善することできたから、 ここではその方法を載せる。 スナップショットの結果はライブラリの関係上Chromeブラウザの […]
  • 2013年6月27日 [Javascript][Node.js][express]mongodbと連携させてみる mongodbを使って値の保存、読み出しを使ったプログラムを作成してみる。 まずは expressを使用してひな形を作成する。 次にmongodbとの接続に使用するモデルを作成する。 […]
  • 2013年8月4日 [node.js][express]RESTful API part2 やりたいこと mongoDBとつなげてGETパラメタやDBのデータ内容に応じて出力を変える。 ソース […]
  • 2013年6月23日 [Javascript][node.js]jsdomを使ってみる node.js上でjqueryを使うにはjsdomとdomToHtmlを利用するらしい。 それらを利用してjqeuryでbody以下にp要素を新たに追加するコードを書いてみた。 コンテンツとして使用するhtmlファイルは以下。 […]
  • [Node.js]バッチスクリプトの書き方2016年12月23日 [Node.js]バッチスクリプトの書き方 はじめに この記事はNode.js Advent Calendar […]
Pocket

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.