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>
