LANCARD.LAB｜ランカードコムのスタッフブログ

Node.jsを使ってSocket.ioを用いたチャットルームを作成したいと思います

せっかくなので、前回紹介したYeomanを使って作成

generator-socketioというジェネレータがあるようなのでコレを使います。

まずはジェネレータのインストール

XXXXX:chat XXXXX$ sudo npm install -g generator-socketio
Password:

実行するディレクトリをつくったらyoで実行

今回はbootstrap使用、スタイルシートはCSSを使うことにします

XXXXX:workspace XXXXX$ mkdir chat
XXXXX:workspace XXXXX$ cd chat
XXXXX:chat XXXXX$ yo socketio

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

[?] What do you want to call this project? chat
[?] Write a brief description.
[?] What port number would you like to run on? 1337
chat
to run on port - 1337
[?] Do you want to use Bootstrap? Yes
true
[?] In what format would you like the Bootstrap stylesheets? css
css
   create server.js
   create views/index.ejs
   create public/js/app.js
   create Gruntfile.js
   create package.json
   create bower.json
   create .editorconfig
   create .jshintrc
   create .bowerrc
   create .gitignore

~~~

あとはgruntで実行するだけ。あーなんて楽ちん…

XXXXX:chat XXXXX$ grunt

あーbootstrap入れてなかった

Gruntfile.jsを確認した所、public/bowser_componentsにbootstrapファイルを

入れるといいみたいですね

XXXXX:chat XXXXX$ vi Gruntfile.js
~~~
    cssmin: {
      combine: {
        files: {
          'public/css/core.css': 'public/bower_components/bootstrap.css/css/bootstrap.css'
~~~

publicにbower_componentsディレクトリを作成し、公式サイトでDLしたbootstrapファイルを入れます

XXXXX:public XXXXX$ mkdir bower_components/
XXXXX:public XXXXX$ mkdir bower_components/bootstrap.css/

もう一回gruntで実行

おおーうまく行った！

すでに基本的なチャット機能が入っているようで、

もう一つブラウザを開いて文章のやりとりをしてみるときちんと動きます

せっかくなので、少し編集を加えてチャット部屋を用意してみることにします

TOP(localhost:1337)にアクセスしたらランダムなユーザ名と部屋IDを作成し、

各部屋(localhost:1337/id)に飛ぶイメージです

以下編集後

server.js 38行目〜

/*************************************
//
// chat app
//
**************************************/

// express magic
var express = require('express');
var app = express();
var server = require('http').createServer(app)
var io = require('socket.io').listen(server);
var device  = require('express-device');

var runningPortNumber = process.env.PORT;


app.configure(function(){
    // I need to access everything in '/public' directly
    app.use(express.static(__dirname + '/public'));

    //set the view engine
    app.set('view engine', 'ejs');
    app.set('views', __dirname +'/views');

    app.use(device.capture());
});


// logs every request
app.use(function(req, res, next){
    // output every request in the array
    console.log({method:req.method, url: req.url, device: req.device});

    // goes onto the next function in line
    next();
});

app.get("/", function(req, res){
    res.redirect('/'+ random_string(12));
});

app.get('/:room', function(req, res) {
    res.render('index', {room: req.params.room, name: random_string(5)});
});

io.sockets.on('connection', function (socket) {
    var room;    // 部屋ID
    var name;    // ユーザ名

    socket.emit('connected');

    socket.on('init', function(data) {
        room = data.room;
        name = data.name;

        socket.join(room);
        socket.broadcast.to(room).emit('blast', {msg:"<span style="\&quot;color:red" !important\"="">"+ name +" connected</span>"});
    });

    socket.on('blast', function(data, fn){

        console.log(data);
        io.sockets.to(room).emit('blast', {msg:data.msg});

        fn();//call the client back to clear out the field
    });

    socket.on('disconnect', function() {
        socket.broadcast.to(room).emit('blast', {msg:"<span style="\&quot;color:red" !important\"="">"+ name +" disconnected</span>"});
        socket.leave(room);
    });

});


server.listen(runningPortNumber);


/**
 * ランダムな文字列を返す
 */
function random_string(len) {
    var base = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    base = base.split('');
    var str = '';
    var count = base.length;
    for(var i=0; i<len; i++)="" {="" str="" +="base[Math.floor(Math.random()" *="" count)];="" }="" return="" str;="" <="" pre="">
<p>index.ejsはnameとroomを追加しただけ</p>
<p>views/index.ejs 52行目〜</p>
<pre lang="html">                    <div class="input-group">
                        <input id="blast" type="text" class="form-control" placeholder="send something to everyone">
                        <input id="name" type="hidden" value="<%= name %>">
                        <input id="room" type="hidden" value="<%= room %>">
                        <span class="input-group-btn">
                            <button id="send" class="btn btn-success" type="button">Send</button>
                        </span>
                    </div><!-- /input-group -->
</pre>
<p>app.jsも同じくnameとroom追加</p>
<p>public/js/app.js 13行目〜</p>
<pre lang="javascript">// shortcut for document.ready
$(function(){
    //setup some common vars
    var $blastField = $('#blast'),
        $allPostsTextArea = $('#allPosts'),
        $clearAllPosts = $('#clearAllPosts'),
        $sendBlastButton = $('#send'),
        $nameField = $('#name'),
        $roomField = $('#room');

    socket.emit('init', {name:$nameField.val(), room:$roomField.val()});

    $sendBlastButton.click(function(e){

        var blast = $blastField.val();
        var name  = $nameField.val();
        if(blast.length){
            socket.emit("blast", {msg:name +': '+ blast}, 
                function(data){
                    $blastField.val('');
                });
        }


    });
</pre>
<p>ここまで編集したらもう一回grunt実行</p>
<p>自動的に部屋へジャンプするようになりました</p>
<p><a href="https://www.lancard.com/blog/wp-content/uploads/2014/11/51740aa2139532ada270541145774d93.png"><img loading="lazy" decoding="async" src="https://www.lancard.com/blog/wp-content/uploads/2014/11/51740aa2139532ada270541145774d93-400x167.png" alt="-スクリーンショット 2014-11-24 22.32.44" width="400" height="167" class="alignnone size-medium wp-image-3537" srcset="https://www.lancard.com/blog/wp-content/uploads/2014/11/51740aa2139532ada270541145774d93-400x167.png 400w, https://www.lancard.com/blog/wp-content/uploads/2014/11/51740aa2139532ada270541145774d93-602x252.png 602w, https://www.lancard.com/blog/wp-content/uploads/2014/11/51740aa2139532ada270541145774d93-900x376.png 900w, https://www.lancard.com/blog/wp-content/uploads/2014/11/51740aa2139532ada270541145774d93.png 1376w" sizes="auto, (max-width: 400px) 100vw, 400px"></a></p>
<p>もう一つウィンドウを開き、同じURLにアクセスした後、</p>
<p>元の画面で確認すると部屋に別の人が入室したことを表示してくれています</p>
<p><a href="https://www.lancard.com/blog/wp-content/uploads/2014/11/08d9dea4d931e145b9ba0e7ca37e29fd.png"><img loading="lazy" decoding="async" src="https://www.lancard.com/blog/wp-content/uploads/2014/11/08d9dea4d931e145b9ba0e7ca37e29fd-400x174.png" alt="-スクリーンショット 2014-11-24 23.05.40" width="400" height="174" class="alignnone size-medium wp-image-3538" srcset="https://www.lancard.com/blog/wp-content/uploads/2014/11/08d9dea4d931e145b9ba0e7ca37e29fd-400x174.png 400w, https://www.lancard.com/blog/wp-content/uploads/2014/11/08d9dea4d931e145b9ba0e7ca37e29fd-602x262.png 602w, https://www.lancard.com/blog/wp-content/uploads/2014/11/08d9dea4d931e145b9ba0e7ca37e29fd-900x391.png 900w, https://www.lancard.com/blog/wp-content/uploads/2014/11/08d9dea4d931e145b9ba0e7ca37e29fd.png 1376w" sizes="auto, (max-width: 400px) 100vw, 400px"></a></p>
<p>もちろんチャットも出来ますし</p>
<p>ついでに退出を知らせる機能もあります</p>
<p>ウィンドウを消すと"●●● disconnected"と表示されることが確認できます</p>
<p><a href="https://www.lancard.com/blog/wp-content/uploads/2014/11/3b2329f36413c34137878111ca8cd2bb.png"><img loading="lazy" decoding="async" src="https://www.lancard.com/blog/wp-content/uploads/2014/11/3b2329f36413c34137878111ca8cd2bb-400x167.png" alt="-スクリーンショット 2014-11-24 23.10.16" width="400" height="167" class="alignnone size-medium wp-image-3539" srcset="https://www.lancard.com/blog/wp-content/uploads/2014/11/3b2329f36413c34137878111ca8cd2bb-400x167.png 400w, https://www.lancard.com/blog/wp-content/uploads/2014/11/3b2329f36413c34137878111ca8cd2bb-602x252.png 602w, https://www.lancard.com/blog/wp-content/uploads/2014/11/3b2329f36413c34137878111ca8cd2bb-900x376.png 900w, https://www.lancard.com/blog/wp-content/uploads/2014/11/3b2329f36413c34137878111ca8cd2bb.png 1376w" sizes="auto, (max-width: 400px) 100vw, 400px"></a></p>
<p>以上。らくちん。</p>
<a class="synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-facebook nolightbox" data-provider="facebook" target="_blank" rel="nofollow" title="Share on Facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.lancard.com%2Fblog%2F%3Fp%3D3533&amp;t=Node.js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%81%E3%83%A3%E3%83%83%E3%83%88&amp;s=100&amp;p[url]=https%3A%2F%2Fwww.lancard.com%2Fblog%2F%3Fp%3D3533&amp;p[images][0]=http%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F11%2F73c3a35ef9653e87b0f2ccecc5652e5a-400x167.png&amp;p[title]=Node.js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%81%E3%83%A3%E3%83%83%E3%83%88" style="font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px"><img loading="lazy" decoding="async" alt="Facebook" title="Share on Facebook" class="synved-share-image synved-social-image synved-social-image-share" width="24" height="24" style="display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none" src="https://www.lancard.com/blog/wp-content/plugins/social-media-feather/synved-social/image/social/regular/48x48/facebook.png"></a><a class="synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-twitter nolightbox" data-provider="twitter" target="_blank" rel="nofollow" title="Share on Twitter" href="http://twitter.com/share?url=https%3A%2F%2Fwww.lancard.com%2Fblog%2F%3Fp%3D3533&amp;text=Node.js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%81%E3%83%A3%E3%83%83%E3%83%88" style="font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px"><img loading="lazy" decoding="async" alt="twitter" title="Share on Twitter" class="synved-share-image synved-social-image synved-social-image-share" width="24" height="24" style="display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none" src="https://www.lancard.com/blog/wp-content/plugins/social-media-feather/synved-social/image/social/regular/48x48/twitter.png"></a><a class="synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-linkedin nolightbox" data-provider="linkedin" target="_blank" rel="nofollow" title="Share on Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.lancard.com%2Fblog%2F%3Fp%3D3533&amp;title=Node.js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%81%E3%83%A3%E3%83%83%E3%83%88" style="font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px"><img loading="lazy" decoding="async" alt="linkedin" title="Share on Linkedin" class="synved-share-image synved-social-image synved-social-image-share" width="24" height="24" style="display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none" src="https://www.lancard.com/blog/wp-content/plugins/social-media-feather/synved-social/image/social/regular/48x48/linkedin.png"></a><a class="synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-tumblr nolightbox" data-provider="tumblr" target="_blank" rel="nofollow" title="Share on tumblr" href="https://tumblr.com/share?s=&amp;v=3&amp;t=Node.js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%81%E3%83%A3%E3%83%83%E3%83%88&amp;u=https%3A%2F%2Fwww.lancard.com%2Fblog%2F%3Fp%3D3533" style="font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px"><img loading="lazy" decoding="async" alt="tumblr" title="Share on tumblr" class="synved-share-image synved-social-image synved-social-image-share" width="24" height="24" style="display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none" src="https://www.lancard.com/blog/wp-content/plugins/social-media-feather/synved-social/image/social/regular/48x48/tumblr.png"></a><a class="synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-mail nolightbox" data-provider="mail" rel="nofollow" title="Share by email" href="mailto:?subject=Node.js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%81%E3%83%A3%E3%83%83%E3%83%88&amp;body=%E3%82%B7%E3%82%A7%E3%82%A2%E3%81%99%E3%82%8B%EF%BC%9A:%20https%3A%2F%2Fwww.lancard.com%2Fblog%2F%3Fp%3D3533" style="font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px"><img loading="lazy" decoding="async" alt="mail" title="Share by email" class="synved-share-image synved-social-image synved-social-image-share" width="24" height="24" style="display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none" src="https://www.lancard.com/blog/wp-content/plugins/social-media-feather/synved-social/image/social/regular/48x48/mail.png"></a>						</len;>