とっとこ駆け出しエンジニアぶろぐ: Node.jsとWebSocket.ioでGoogle Docsもどきを作ってみる

Node.jsとWebSocket.ioでGoogle Docsのように複数のユーザとリアルタイムでデータ共有を行うアプリを作ってみました。

Google Docsとは比べ物にならない簡単なアプリですが、お勉強がてらやってみました。
素敵なコーディングが書ける方、ご教授ください。
Git Hub https://github.com/hamuhamu/cheap-docs

デザインは時間がかかるのでやっていません。  
少し画像が見にくいと思いますが、同じ画面を見ているユーザはログイン中のユーザとして表示されて、このページから離脱するとログイン中のユーザから消えます。  
テキストボックスを編集するとロックがかかり他のユーザから編集できなくなり、入力データは全ユーザとリアルタイムで共有できます。

#####実行環境
サーバ 
CentOS 6.4

ブラウザ(動作確認済み)  
Chrome  31.01  
Firefox 26.0  
Internet Explorer  10

#####下準備
Gitが使える方はこちらからクローンして下さい。<a href="https://github.com/hamuhamu/cheap-docs">https://github.com/hamuhamu/cheap-docs</a> 
ここもっとこうした方がいいよってのがあれば教えて下さい！

リアルタイムにデータを共有するために、WebSocket.ioを使用します。 
WebSocket.ioはNPMを使ってインストールしました。 
NVMというバージョン管理ツールをインストールしているともれなくNPM(Node Package Manager)というNode.jsのパッケージ管理ツールもついてきます。 
NVMのインストールの仕方はこちら<a href="http://hamuhamuengineer.blogspot.jp/2014/01/nodejs.html">Node.jsを導入してみる</a>

NPMを使ってWebSocket.ioをインストールします。

<pre class='brush: bash'>
$ mkdir cheap-docs
$ cd cheap-docs
$ npm install websocket.io
</pre>

#####ソースコード
cheap-docs 
　| 
　|-----node_modules/ 
　| 
　|-----cheap-docs.js 
　| 
　|-----config.js 
　| 
　|-----index.html 
　| 
　|-----node_server.js 
 
node_modulesは、npm install websocket.ioで作成されたと思います。 
 
cheap-docs.js
<pre class="brush: javascript">
var ws_client = new WebSocket('ws://127.0.0.1:8080');
var id;
var users;

ws_client.onopen = function() {
    id = new Date().getTime('Y');
    $('#id').html('あなたの ID ' + id);
    ws_client.send(
        JSON.stringify({ mode: 'login',id: id, name: 'ゲスト'})
    );
};

ws_client.onmessage = function(e) {
    var show_login_users = function() {
        var login_users = '';
        for (key in users) {
            login_users += key + ' : ' + users[key] + 'さん　';
        }
        $('#users').html('ログイン中のユーザ　 ' + login_users);
    }
    var json = JSON.parse(e.data);
    if (json.mode == 'init') {
        users = json.users;
        show_login_users();
        for (index in json.edits) {
            $('.cell').eq(index).attr('disabled', true);
        }
        for (index in json.cells) {
            $('.cell').eq(index).val(json.cells[index]);
        }
    } else if(json.mode == 'login') {
        users[json.id] = json.name;
        show_login_users();
    } else if(json.mode == 'logout') {
        delete users[json.id];
        show_login_users();
        $('.cell').eq(json.index).attr('disabled', false);
    } else if (json.mode == 'edit' && json.id != id) {
        $('.cell').eq(json.index).attr('disabled', true);
    } else if (json.mode == 'editing' && json.id != id) {
        $('.cell').eq(json.index).val(json.text);
    } else if (json.mode == 'edited' && json.id != id) {
        $('.cell').eq(json.index).attr('disabled', false);
    }
};

ws_client.onerror = function(e) {
    $('#error').html('WebSocket Error');
};

window.onbeforeunload = function () {
    ws_client.send(
        JSON.stringify({ mode: 'logout',id: id, index: $('.cell').index($(':focus'))})
    );
};

$('.cell').focus(function() {
 ws_client.send(
 JSON.stringify({ mode: 'edit', index: $('.cell').index(this), id: id})
 );
});
$('.cell').keyup(function() {
 ws_client.send(
 JSON.stringify({ mode: 'editing', index: $('.cell').index(this), id: id, text:$(this).val()})
 );
});
$('.cell').blur(function() {
 ws_client.send(
 JSON.stringify({ mode: 'edited', index: $('.cell').index(this), id: id})
 );
});
</pre>

cheap-docs.jsはクライアントで動作するJavaScriptで、テキストボックスに入力など何らかのイベントが発生したらWebSocketでサーバにデータを送信します。  
接続中のクライアントにサーバからプッシュされて受け取ったデータの整形もここで行っています。  
クライアント側で接続中のユーザ情報はキャッシュしています。  
１行目のvar ws_client = new WebSocket('ws://127.0.0.1:8080');は、お使いのサーバのIPアドレスとポート番号を指定してください。

config.js
<pre class="brush: javascript">
exports.port = 8080;
</pre>

サーバの待ち受けポートの設定を記述しています。 
 
 
index.html

  
<!DOCTYPE html>
<html>
 <head>
    
    Cheap Docs
 </head>
 <body>
    
    
    
    
        
            
                
                    
                
                
                    
                
                
                    
                
            
            
                
                    
                
                
                    
                
                
                    
                
            
            
                
                    
                
                
                    
                
                
                    
                
            
        
    
    
    
</body>
</html>

node_server.js
<pre class="brush: javascript">
var config = require('./config');
var io = require('websocket.io');
var users = new Object();
var edits = new Object();
var cells = new Object();

node_server.jsは、サーバで処理を待ち受けて、接続中のクライアントに受け取ったデータを共有するためにプッシュします。 
 
ここの処理でデータをプッシュしていますが、データを送信したクライアントは送信したデータを受け取る必要はないのですが、
WebSocket.ioには送信元を含めないブロードキャストがないみたいなので送信元にもデータが飛んでいます。 
ここはなんとか修正したいところです。ご存知のかたいらっしゃれば教えて下さい。
<pre class="brush: javascript">
 ws_server.clients.forEach(function(client) {
 if (client != null) {
 client.send(message);
 }
 });
</pre>

#####実行してみる
サーバからnode_server.jsを実行します

<pre class="brush: javascript">
node node_server.js
listen ... 
</pre>
ブラウザを２つ立ち上げてcheap-docs/index.htmlにアクセスします。 
テキストボックスに文字を入力してリアルタイムにデータが共有されて入れば成功です。

#####感想
大したコーディングしていませんが、リアルタイム通信は作っていて楽しかったです。 
リアルタイム性が求められるアプリには実装してみたいですが自分でも把握しきれていないところがあるので要勉強ですね。 
比較的新しい技術なのでシステムのコアな部分に実装する際はちゃんと検証する必要があると思います。

#####最近読んだ本
<table cellpadding="0" cellspacing="0" border="0" style=" border:1px solid #ccc; width:170px;"><tr style="border-style:none;"><td style="vertical-align:top; border-style:none; padding:10px 10px 0pt;"><a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4774159905%2F%3Ftag%3Da8-affi-163528-22" target="_blank"><img border="0" alt="" src="http://ecx.images-amazon.com/images/I/61XZA+RKxOL._SS160_.jpg" /></a></td></tr><tr style="border-style:none;"><td style="font-size:12px; vertical-align:middle; border-style:none; padding:10px;"><a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4774159905%2F%3Ftag%3Da8-affi-163528-22" target="_blank">WEB DB PRESS Vol.77</a>新品価格 ￥1,554から (2014/1/4 23:21時点)</td></tr></table>
<img border="0" width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=264I8U+BAN2YA+249K+BWGDT" alt="">

<table cellpadding="0" cellspacing="0" border="0" style=" border:1px solid #ccc; width:170px;"><tr style="border-style:none;"><td style="vertical-align:top; border-style:none; padding:10px 10px 0pt;"><a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4873116066%2F%3Ftag%3Da8-affi-163528-22" target="_blank"><img border="0" alt="" src="http://ecx.images-amazon.com/images/I/51mlvcBMKgL._SS160_.jpg" /></a></td></tr><tr style="border-style:none;"><td style="font-size:12px; vertical-align:middle; border-style:none; padding:10px;"><a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4873116066%2F%3Ftag%3Da8-affi-163528-22" target="_blank">Nodeクックブック</a>新品価格 ￥3,570から (2014/1/4 23:22時点)</td></tr></table>
<img border="0" width="1" height="1" src="http://www11.a8.net/0.gif?a8mat=264I8U+BAN2YA+249K+BWGDT" alt="">

とっとこ駆け出しエンジニアぶろぐ

2014年1月4日土曜日

Node.jsとWebSocket.ioでGoogle Docsもどきを作ってみる

0 件のコメント :

コメントを投稿