Node.js+socket.ioで画像をHTTP POSTしたらページに流れてくるアプリをつくった
こんにちは。お金が入りました、きたけーです。
思いつきで、https://github.com/kitak/nagare っていう、画像をHTTP POSTしたら、アプリのページを開いている人に配信するアプリを帰宅後の時間でつくってみた(みせかたは雑)。
つかいかた
事前にサーバーを立ち上げてページを表示しておいて、こんなかんじでHTTP POSTのリクエストをおくったら、
curl -XPOST -F image=@RthClfQJ.png http://localhost:8080/images
こんなかんじでサーバーから画像がプッシュされます
実装
クライアントサイド
socket.ioで通信を確立させて、サーバーからの配信を受け取ります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nagare</title> <script src="/socket.io/socket.io.js"></script> <script src="/components/jquery/dist/jquery.min.js"></script> <script> $(function () { var socket = io.connect('http://localhost:8080') socket.on('push image', function (data) { $('<img style="display: block;">').attr('src', data.dataUrl).prependTo($('body')); }); }); </script> </head> <body> <p>hello world</p> </body> </html>
サーバーサイド
アップロードされた画像をdataurlの形式にエンコードして、socket.ioでページを開いている人に配信しています。
express = require 'express' http = require 'http' app = express() server = http.createServer(app) io = require('socket.io')(server) util = require "util" mime = require "mime" fs = require "fs" multipart = require 'connect-multiparty' multipartMiddleware = multipart() app.use express.static('public') app.post '/images', multipartMiddleware, (req, res) -> tmpPath = req.files.image.path fs.readFile tmpPath, (err, buf) -> if err? res.status(422) return data = buf.toString('base64') io.sockets.emit 'push image', {dataUrl: util.format("data:%s;base64,%s", mime.lookup(tmpPath), data) } res.end() server.listen(8080)