ニコルンのチャットビューワサイトを作ってみる

̃Gg[͂ĂȃubN}[Nɒlj

ニコルン
ニコルンアプリの通信パケットからコメントの送受信方法を調べる延長で作ってみることにした。

以下は公開した時のツイート。



サーバの実装


チャットビューワのサーバ側では以下2プロセスを動作させるようにした。
1 ニコルンのチャットを受信し標準出力に出力するアプリ(NicolunCommentViewer.exe)。
 .NetFramework(Mono)上で動作するC#アプリ。
2 標準入力を読んでビューワクライアント(ブラウザ)とのソケット通信を行うHTTPサーバ(NicolunServer.js)。
 node.js上で動作する。

上記を以下のようにパイプでつないでチャットビューワサーバを構成する。
動作環境はCentOS7.1
今回は簡単のために受信するチャットroomは固定にしている。

mono NicolunCommentViewer.exe | node ./NicolunServer.js

 

NicolunServer.js

標準入力に書き込まれた文字をクライアントに送信するHTTPサーバ。
(標準入力には前述の(NicolunCommentViewer.exe)が受信したチャット文字列がパイプ経由で書き込まれる。)
なお、クライアントからの初回接続時は過去ログ(comment.txt)を読んでクライアントに送信する。
参考)のサイトのソースを改造させて頂いた。

console.log('NicolunServer start.');

//標準入力を読む
//参考) http://mironal-memo.blogspot.jp/2012/08/node.js-pipe.html
process.stdin.resume();
process.stdin.setEncoding('utf8');
var fragment = "";
//読み込み開始
process.stdin.on('data', function(chunk){
	if (chunk == "") { return ;}
	var lines = chunk.split("\n");
	lines[0] = fragment + lines[0];
	fragment = lines.pop();
	lines.forEach(function(line){
		console.log('stdin line : ' + line);
		socketSend(line);
	});
});

//読み込み終了
process.stdin.on('end', function(){
});


//socket通信できるHTTPサーバ
//参考) http://qiita.com/hosomichi/items/66b309a6c3c20d910218


var fs = require("fs");
var server = require("http").createServer(function(req, res) {
	res.writeHead(200, {"Content-Type":"text/html"});
	var output = fs.readFileSync("./index.html", "utf-8");
	res.end(output);
}).listen(8080);

var io = require("socket.io").listen(server);

// ユーザ管理ハッシュ
var userHash = {};

//接続
io.sockets.on("connection", function (socket) {
	console.log("on connection");

	
	//connectedイベント
	socket.on("connected", function (name) {
		console.log("on connected name=" + name);
		userHash[socket.id] = name;
		
		//通知する
		//io.sockets.emit("publish", {value: msg});
		
		//過去ログを読んで送信する
		var output = fs.readFileSync("./comment.txt", "utf-8");
		var lines = output.split("\n");
		lines.forEach(function(line){
			//io.sockets.emit("publish", {value: line});//これは全員に送信してしまう
			//io.sockets.socket(socket.id).emit('publish',{value:line});//これは文法が古い
			io.sockets.to(socket.id).emit('publish',{value:line});//socket.idに対してだけ送れる
		});
	});

	//publishイベント
	socket.on("publish", function (data) {
		console.log("on publish data=" + data);
		//io.sockets.emit("publish", {value:data.value});
	});

	//disconnectイベント
	socket.on("disconnect", function () {
		if (userHash[socket.id]) {
			//通知する
			//var msg = userHash[socket.id] + "が退出しました";
			delete userHash[socket.id];
			//io.sockets.emit("publish", {value: msg});
		}
	});
});

function socketSend(str){
	io.sockets.emit("publish", {value: str});
}

 

クライアントの実装


socket.ioのお約束として、htmlのヘッダに以下記述が必要。
xxx.xxx.xxx.xxx:xxxxはサーバのIP、ポート

<script src="http://xxx.xxx.xxx.xxx:xxxx/socket.io/socket.io.js"></script>

 

Nicolun.js

以下のようにinit()メソッドの引数にcallbackFuncを渡すと、
サーバからチャット受信時にcallbackFuncを呼んでくれるクラスとして用意した。

new Nicolun().init(callbackFunc);

callbackFuncの第1引数にチャット文字列が入っているので画面に表示することでチャットビューワサイトとなる。

Nicolun.jsの実装は以下

//********************************************************************************************
/**
 * @brief		ニコルン情報取得
 * @author		@loftkun
 */
//********************************************************************************************
var Nicolun = (function() {
	
	//********************************************************************************************
	/**
	 * @brief		コンストラクタ
	*/
	//********************************************************************************************
	var Nicolun = function() {
	};

	var nicolun = Nicolun.prototype;

	//********************************************************************************************
	/**
	 * @brief		ソケット初期化
	 */
	//********************************************************************************************
	nicolun.init = function(onPublish){
		var socketio = io.connect('http://xxx.xxx.xxx.xxx:xxxx/');//サーバのIP、ポート

		socketio.on("connected", function(name) {});
		socketio.on("publish", function (data) { onPublish(data.value); });
		socketio.on("disconnect", function () {});

		//開始
		socketio.emit("connected", "test_user");
	};
	return Nicolun;
})();

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>