読者です 読者をやめる 読者になる 読者になる

kitak.blog

Kみたいなエンジニアになりたいブログ

Node.js+socket.ioで画像をHTTP POSTしたらページに流れてくるアプリをつくった

nodejs

こんにちは。お金が入りました、きたけーです。

思いつきで、https://github.com/kitak/nagare っていう、画像をHTTP POSTしたら、アプリのページを開いている人に配信するアプリを帰宅後の時間でつくってみた(みせかたは雑)。

つかいかた

事前にサーバーを立ち上げてページを表示しておいて、こんなかんじでHTTP POSTのリクエストをおくったら、

curl -XPOST -F image=@RthClfQJ.png http://localhost:8080/images

こんなかんじでサーバーから画像がプッシュされます

f:id:kitak:20141010083042p:plain

実装

クライアントサイド

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)