Socket.IOで画像ファイルを転送する

Socket.IOを使ってBase64形式の画像データを転送し、クライアント側で表示する方法です。

サーバ

Node.js & Expressでのサンプルです。以下の配置で画像があるとします。

  • index.js
  • public/img/sample1.jpg

fs.readFile()'base64'フラグを指定することにより、読み取ったデータをBase64エンコードされた文字列として取得します。そして、そのデータをSocketで送っています。

"use strict";

const path = require('path');
const fs = require('fs');
const http = require('http');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));

const server = http.createServer(app).listen(8080, () => {
  console.log('http://localhost:8080/ start');
});

const io = require('socket.io')(server);
io.on('connection', socket => {
    socket.on('disconnect', reason => {
        console.log(`disconnect: %s, %s`, reason, socket.id);
    });

    socket.on('getimage', reason => {
        let imageFilePath = path.join(__dirname, 'public/img/sample1.jpg');

        fs.readFile(imageFilePath, 'base64', (err, data) => {
            if (err) {
                console.log(err);
                return;
            }
            const imgSrc = 'data:image/jpg;base64,' + data;
            socket.emit('sendImage', { imgSrc });
        });
    });
});

クライアント

SocketでBase64形式のデータを受け取り、imgタグの属性SRCに設定します。

socket.on('sendImage', (data) => {
    const imgElement = document.getElementById('imageViewer');
    imgElement.src = data.imgSrc;
});

function getImage() {
    socket.emit('getimage', { });
}
<button type="button" onclick="getImage();" class="btn btn-primary">イメージ表示</button>
<img id="imageViewer" width="640" height="360">

クライアントのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.io Client</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/main.js"></script>
    <script>
        let socket = io('http://localhost:8080');

        socket.on('connect', () => {
            console.log('connect success');
        });

        socket.on('sendImage', (data) => {
            const imgElement = document.getElementById('imageViewer');
            imgElement.src = data.imgSrc;
        });

        function getImage() {
            socket.emit('getimage', { });
        }
    </script>
</head>
<body>
    <div class="m-2">
        <button type="button" onclick="getImage();" class="btn btn-primary">イメージ表示</button>
        <img id="imageViewer" width="640" height="360">
    </div>
</body>
</html>
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です