\u4e0b\u8a18\u306e\u30b5\u30a4\u30c8\u3092\u53c2\u8003\u306b\u3057\u3066\uff0c<\/p>\n
\n\u30d5\u30a1\u30a4\u30eb\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u308b\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u307f\u305f\u3002\u9001\u3063\u305f\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30ea\u30f3\u30af\u304c\u8868\u793a\u3055\u308c\u308b\u3002\u307e\u3060\u6d88\u3057\u3066\u3044\u306a\u3044\u4f59\u5206\u306a\u30b3\u30fc\u30c9\u304c\u6b8b\u3063\u3066\u3044\u308b\u3002express \u306e\u30d5\u30a9\u30eb\u30c0\u30fc\u516c\u958b\u306e\u6a5f\u80fd\u3082\u4f7f\u7528\u3059\u308b\u3002<\/p>\n
\u30b5\u30fc\u30d0\u30fc\u5074\u306e\u30b3\u30fc\u30c9\uff1aapp.js <\/p>\n
\/\/ S01. \u5fc5\u8981\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u8aad\u307f\u8fbc\u3080\r\n\r\nvar express = require('express');\r\nvar app = express();\r\n\r\n\r\nvar http = require('http').Server(app);\r\n\r\nvar io = require('socket.io')(http);\r\n\r\nvar fs = require('fs');\r\n\r\n\/\/ S02. HTTP\u30b5\u30fc\u30d0\u3092\u751f\u6210\u3059\u308b\r\n\/*\r\nvar server = http.createServer(function(req, res) {\r\n res.writeHead(200, {'Content-Type' : 'text\/html'});\r\n res.end(fs.readFileSync(__dirname + '\/index.html', 'utf-8'));\r\n}).listen(3000); \/\/ \u30dd\u30fc\u30c8\u7af6\u5408\u306e\u5834\u5408\u306f\u5024\u3092\u5909\u66f4\r\n*\/\r\n\r\n\/\/static \u30df\u30c9\u30eb\u30a6\u30a8\u30a2\u8a2d\u5b9a\u3092\u8ffd\u52a0\r\napp.use(express.static('public'));\r\n\/\/\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u5b9a\r\napp.get('\/', function (req, res) {\r\n res.send('Hello World');\r\n});\r\n\r\n\/\/app.listen(3000);\r\n\r\n\r\nhttp.listen(3000, function () {console.log('Server running at http:\/\/localhost:3000\/');});\r\n\r\n\r\n\/\/ S03. HTTP\u30b5\u30fc\u30d0\u306b\u30bd\u30b1\u30c3\u30c8\u3092\u3072\u3082\u4ed8\u3051\u308b\uff08WebSocket\u6709\u52b9\u5316\uff09\r\n\r\n\/\/var io = socketio.listen(server);\r\n\r\n\/\/ S04. connection\u30a4\u30d9\u30f3\u30c8\u30fb\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3059\u308b\r\nio.on('connection', function(socket) {\r\n var name;\r\n \/\/ S05. client_to_server\u30a4\u30d9\u30f3\u30c8\u30fb\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3059\u308b\r\n socket.on('client_to_server', function(data) {\r\n \/\/ S06. server_to_client\u30a4\u30d9\u30f3\u30c8\u30fb\u30c7\u30fc\u30bf\u3092\u9001\u4fe1\u3059\u308b\r\n \/\/ io.emit('server_to_client', {value : data.value});\r\n\r\n\tvar moto = data.value;\r\n\r\n\tvar tmp = moto.replace(\/^data:\\w+\\\/\\w+;base64,\/, '');\r\n\r\n\tvar tmpBinary = new Buffer.from(tmp, 'base64');\r\n\r\n\tvar fileExtension = moto.toString().slice(moto.indexOf('\/') + 1, moto.indexOf(';'));\r\n\r\n\tvar tmpDate = new Date();\r\n\r\n\tvar unixTime = Math.round(tmpDate.getTime() \/ 1000);\r\n\r\n\tvar tmpFileName = unixTime + '.' + fileExtension;\r\n\r\n\tfs.writeFile('public\/work\/' + tmpFileName, tmpBinary,function (err) {\r\n\r\n\t\tio.emit('server_to_client', {value : tmpFileName});\r\n\t});\r\n\r\n });\r\n \/\/ S07. client_to_server_broadcast\u30a4\u30d9\u30f3\u30c8\u30fb\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u3001\u9001\u4fe1\u5143\u4ee5\u5916\u306b\u9001\u4fe1\u3059\u308b\r\n socket.on('client_to_server_broadcast', function(data) {\r\n socket.broadcast.emit('server_to_client', {value : data.value});\r\n });\r\n \/\/ S08. client_to_server_personal\u30a4\u30d9\u30f3\u30c8\u30fb\u30c7\u30fc\u30bf\u3092\u53d7\u4fe1\u3057\u3001\u9001\u4fe1\u5143\u306e\u307f\u306b\u9001\u4fe1\u3059\u308b\r\n socket.on('client_to_server_personal', function(data) {\r\n var id = socket.id;\r\n name = data.value;\r\n var personalMessage = \"\u3042\u306a\u305f\u306f\u3001\" + name + \"\u3055\u3093\u3068\u3057\u3066\u5165\u5ba4\u3057\u307e\u3057\u305f\u3002\"\r\n \/\/io.to(id).emit('server_to_client', {value : personalMessage});\r\n });\r\n \/\/ S09. disconnect\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u4fe1\u3057\u3001\u9000\u51fa\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3059\u308b\r\n socket.on('disconnect', function() {\r\n if (name == 'undefined') {\r\n console.log(\"\u672a\u5165\u5ba4\u306e\u307e\u307e\u3001\u3069\u3053\u304b\u3078\u53bb\u3063\u3066\u3044\u304d\u307e\u3057\u305f\u3002\");\r\n } else {\r\n var endMessage = name + \"\u3055\u3093\u304c\u9000\u51fa\u3057\u307e\u3057\u305f\u3002\"\r\n io.emit('server_to_client', {value : endMessage});\r\n }\r\n });\r\n});\r\n<\/pre>\n\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306e\u30b3\u30fc\u30c9\uff1aindex.html<\/p>\n
<!DOCTYPE html>\r\n <html lang="ja">\r\n <head>\r\n <meta charset="utf-8">\r\n <title>websocket-chat<\/title>\r\n <link rel="stylesheet"\r\n href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css">\r\n <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js"><\/script>\r\n <script type="text\/javascript" src="\/socket.io\/socket.io.js"><\/script>\r\n <\/head>\r\n <body>\r\n <div class="container">\r\n <h1>WebSocket<\/h1>\r\n\r\n\t\t<form id="my_form">\r\n \t\t<input id="ifName" name="ifName" type="file" ><br>\r\n\t\t<\/form>\r\n\r\n <div id="chatLogs"><\/div>\r\n <\/div>\r\n \r\n <script type="text\/javascript">\r\n var socket = io.connect();\r\n \r\n socket.on("server_to_client", function(data){appendMsg(data.value)});\r\n \r\n function appendMsg(text) {\r\n $("#chatLogs").append("<div><a href='work\/" + text + "'>" + text + "<\/a><\/div>");\r\n }\r\n \r\n $("form").submit(function(e){\r\n var message = $("#msgForm").val();\r\n $("#msgForm").val('');\r\n socket.emit("client_to_server", {value : message});\r\n e.preventDefault();\r\n });\r\n <\/script> \r\n\r\n <script type="text\/javascript">\r\n$(function() {\r\n\t$('#ifName').change(function() {\r\n\r\n\t\tvar base64txt = this.files[0];\r\n\r\n\t\tvar reader = new FileReader();\r\n\r\n\r\n\t\treader.onloadend = function(){\r\n\r\n\t\t\tvar src = reader.result;\r\n \r\n\t\t\tsocket.emit("client_to_server", {value : src});\r\n\t\t}\t\t\r\n \r\n reader.readAsDataURL(base64txt);\r\n })\r\n})\r\n\r\n<\/script> \r\n\r\n <\/body>\r\n <\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"