{"id":3533,"date":"2014-11-25T18:26:10","date_gmt":"2014-11-25T09:26:10","guid":{"rendered":"http:\/\/www.lancard.com\/blog\/?p=3533"},"modified":"2025-03-12T11:28:22","modified_gmt":"2025-03-12T02:28:22","slug":"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","status":"publish","type":"post","link":"https:\/\/www.lancard.com\/blog\/2014\/11\/25\/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\/","title":{"rendered":"Node.js\u3092\u4f7f\u3063\u3066\u30c1\u30e3\u30c3\u30c8"},"content":{"rendered":"

Node.js\u3092\u4f7f\u3063\u3066Socket.io\u3092\u7528\u3044\u305f\u30c1\u30e3\u30c3\u30c8\u30eb\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059<\/p>\n

\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u3001\u524d\u56de\u7d39\u4ecb\u3057\u305fYeoman\u3092\u4f7f\u3063\u3066\u4f5c\u6210<\/p>\n

generator-socketio<\/a>\u3068\u3044\u3046\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u304c\u3042\u308b\u3088\u3046\u306a\u306e\u3067\u30b3\u30ec\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n

\u307e\u305a\u306f\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/p>\n

\r\nXXXXX:chat XXXXX$ sudo npm install -g generator-socketio\r\nPassword:\r\n<\/pre>\n
\u5b9f\u884c\u3059\u308b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u3064\u304f\u3063\u305f\u3089yo\u3067\u5b9f\u884c<\/p>\n
\u4eca\u56de\u306fbootstrap\u4f7f\u7528\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306fCSS\u3092\u4f7f\u3046\u3053\u3068\u306b\u3057\u307e\u3059<\/p>\n
\r\nXXXXX:workspace XXXXX$ mkdir chat\r\nXXXXX:workspace XXXXX$ cd chat\r\nXXXXX:chat XXXXX$ yo socketio\r\n\r\n     _-----_\r\n    |       |\r\n    |--(o)--|   .--------------------------.\r\n   `---------\u00b4  |    Welcome to Yeoman,    |\r\n    ( _\u00b4U`_ )   |   ladies and gentlemen!  |\r\n    \/___A___\\   '__________________________'\r\n     |  ~  |\r\n   __'.___.'__\r\n \u00b4   `  |\u00b0 \u00b4 Y `\r\n\r\n[?] What do you want to call this project? chat\r\n[?] Write a brief description.\r\n[?] What port number would you like to run on? 1337\r\nchat\r\nto run on port - 1337\r\n[?] Do you want to use Bootstrap? Yes\r\ntrue\r\n[?] In what format would you like the Bootstrap stylesheets? css\r\ncss\r\n   create server.js\r\n   create views\/index.ejs\r\n   create public\/js\/app.js\r\n   create Gruntfile.js\r\n   create package.json\r\n   create bower.json\r\n   create .editorconfig\r\n   create .jshintrc\r\n   create .bowerrc\r\n   create .gitignore\r\n\r\n~~~\r\n<\/pre>\n
\u3042\u3068\u306fgrunt\u3067\u5b9f\u884c\u3059\u308b\u3060\u3051\u3002\u3042\u30fc\u306a\u3093\u3066\u697d\u3061\u3093\u2026<\/p>\n
XXXXX:chat XXXXX$ grunt<\/pre>\n
\"-\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/a><\/p>\n
\u3042\u30fcbootstrap\u5165\u308c\u3066\u306a\u304b\u3063\u305f<\/p>\n
Gruntfile.js\u3092\u78ba\u8a8d\u3057\u305f\u6240\u3001public\/bowser_components\u306bbootstrap\u30d5\u30a1\u30a4\u30eb\u3092<\/p>\n
\u5165\u308c\u308b\u3068\u3044\u3044\u307f\u305f\u3044\u3067\u3059\u306d<\/p>\n
\r\nXXXXX:chat XXXXX$ vi Gruntfile.js\r\n~~~\r\n    cssmin: {\r\n      combine: {\r\n        files: {\r\n          'public\/css\/core.css': 'public\/bower_components\/bootstrap.css\/css\/bootstrap.css'\r\n~~~\r\n<\/pre>\n
public\u306bbower_components\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3001\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u3067DL\u3057\u305fbootstrap\u30d5\u30a1\u30a4\u30eb\u3092\u5165\u308c\u307e\u3059<\/p>\n
\r\nXXXXX:public XXXXX$ mkdir bower_components\/\r\nXXXXX:public XXXXX$ mkdir bower_components\/bootstrap.css\/\r\n<\/pre>\n
\"-\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/a><\/p>\n
\u3082\u3046\u4e00\u56degrunt\u3067\u5b9f\u884c<\/p>\n
\u304a\u304a\u30fc\u3046\u307e\u304f\u884c\u3063\u305f\uff01<\/p>\n
\"-\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/a><\/p>\n
\u3059\u3067\u306b\u57fa\u672c\u7684\u306a\u30c1\u30e3\u30c3\u30c8\u6a5f\u80fd\u304c\u5165\u3063\u3066\u3044\u308b\u3088\u3046\u3067\u3001<\/p>\n
\u3082\u3046\u4e00\u3064\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u3044\u3066\u6587\u7ae0\u306e\u3084\u308a\u3068\u308a\u3092\u3057\u3066\u307f\u308b\u3068\u304d\u3061\u3093\u3068\u52d5\u304d\u307e\u3059<\/p>\n
\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u3001\u5c11\u3057\u7de8\u96c6\u3092\u52a0\u3048\u3066\u30c1\u30e3\u30c3\u30c8\u90e8\u5c4b\u3092\u7528\u610f\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3059<\/p>\n
TOP(localhost:1337)\u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u3089\u30e9\u30f3\u30c0\u30e0\u306a\u30e6\u30fc\u30b6\u540d\u3068\u90e8\u5c4bID\u3092\u4f5c\u6210\u3057\u3001<\/p>\n
\u5404\u90e8\u5c4b(localhost:1337\/id)\u306b\u98db\u3076\u30a4\u30e1\u30fc\u30b8\u3067\u3059<\/p>\n
\u4ee5\u4e0b\u7de8\u96c6\u5f8c<\/p>\n
server.js 38\u884c\u76ee\u301c<\/p>\n
\r\n\/*************************************\r\n\/\/\r\n\/\/ chat app\r\n\/\/\r\n**************************************\/\r\n\r\n\/\/ express magic\r\nvar express = require('express');\r\nvar app = express();\r\nvar server = require('http').createServer(app)\r\nvar io = require('socket.io').listen(server);\r\nvar device  = require('express-device');\r\n\r\nvar runningPortNumber = process.env.PORT;\r\n\r\n\r\napp.configure(function(){\r\n    \/\/ I need to access everything in '\/public' directly\r\n    app.use(express.static(__dirname + '\/public'));\r\n\r\n    \/\/set the view engine\r\n    app.set('view engine', 'ejs');\r\n    app.set('views', __dirname +'\/views');\r\n\r\n    app.use(device.capture());\r\n});\r\n\r\n\r\n\/\/ logs every request\r\napp.use(function(req, res, next){\r\n    \/\/ output every request in the array\r\n    console.log({method:req.method, url: req.url, device: req.device});\r\n\r\n    \/\/ goes onto the next function in line\r\n    next();\r\n});\r\n\r\napp.get(\"\/\", function(req, res){\r\n    res.redirect('\/'+ random_string(12));\r\n});\r\n\r\napp.get('\/:room', function(req, res) {\r\n    res.render('index', {room: req.params.room, name: random_string(5)});\r\n});\r\n\r\nio.sockets.on('connection', function (socket) {\r\n    var room;    \/\/ \u90e8\u5c4bID\r\n    var name;    \/\/ \u30e6\u30fc\u30b6\u540d\r\n\r\n    socket.emit('connected');\r\n\r\n    socket.on('init', function(data) {\r\n        room = data.room;\r\n        name = data.name;\r\n\r\n        socket.join(room);\r\n        socket.broadcast.to(room).emit('blast', {msg:\"\"+ name +\" connected<\/span>\"});\r\n    });\r\n\r\n    socket.on('blast', function(data, fn){\r\n\r\n        console.log(data);\r\n        io.sockets.to(room).emit('blast', {msg:data.msg});\r\n\r\n        fn();\/\/call the client back to clear out the field\r\n    });\r\n\r\n    socket.on('disconnect', function() {\r\n        socket.broadcast.to(room).emit('blast', {msg:\"\"+ name +\" disconnected<\/span>\"});\r\n        socket.leave(room);\r\n    });\r\n\r\n});\r\n\r\n\r\nserver.listen(runningPortNumber);\r\n\r\n\r\n\/**\r\n * \u30e9\u30f3\u30c0\u30e0\u306a\u6587\u5b57\u5217\u3092\u8fd4\u3059\r\n *\/\r\nfunction random_string(len) {\r\n    var base = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\r\n    base = base.split('');\r\n    var str = '';\r\n    var count = base.length;\r\n    for(var i=0; i\n
index.ejs\u306fname\u3068room\u3092\u8ffd\u52a0\u3057\u305f\u3060\u3051<\/p>\n
views\/index.ejs 52\u884c\u76ee\u301c<\/p>\n
\r\n                    
\r\n                        \r\n                        \">\r\n                        \">\r\n                        \r\n