Socket.IOでJPEG画像が送れない

実現したいこと

[JPEG画像ファイルをSocket.IOを用いて送信できるようにしたいです ]

前提

　Node.jsでSocket.IOを利用してチャットルームのようなものを作成しています。
チャットルームでは画像を送信するとリアルタイムに全ユーザーにその画像が送られて表示できるようにしたいです。

　PNG画像で上記機能を満たすことは出来たのですが、JPEG画像を送信しようとすると表示されません。
PNG画像の場合はできて、JPEG画像の場合に出来ないのが理解できず、解決策をネットで調べましたがよくわかりませんでした。

　お手数おかけし申し訳ございませんが、どうすればいいのかご教授願えますと幸いです。

発生している問題・エラーメッセージ

　JPEG画像を送信すると、何も表示されない。

該当のソースコード

app.js(サーバ側の処理)

javascript
1const express = require('express');
2const http = require('http');
3const socketIo = require('socket.io');
4
5const app = express();
6const server = http.Server(app);
7const io = socketIo(server);
8
9const PORT = 3000;
10
11app.get('/', (req, res) => {
12  res.sendFile(__dirname + '/index.html');
13});
14
15server.listen(PORT, () => {
16  console.log(`listening on port ${PORT}`);
17});
18
19io.on('connection', (socket) => {
20  console.log('user connected');
21  socket.on('sendMessage', (message) => {
22    console.log('Message has been sent: ', message);
23
24    io.emit('receiveMessage', message);
25  });
26});
27
28io.sockets.on( 'connection', function (socket) {
29
30    socket.on( 'image', function ( imageData ) {
31        console.log('TEST');
32      
33      io.emit('image', imageData);
34
35    });
36   
37  });

index.html(クライアント側の処理)

html
1<html>
2<head>
3    <script src="/socket.io/socket.io.js"></script>
4    
5</head>  
6
7<body>
8    <h1>simple chat</h1>
9    <input id="inputText" type="text">
10    <input id="sendButton" type="submit">
11    <ul id="messageList" />
12
13    <form action="" name="form">
14        <input id="file" type="file">
15    </form>
16    <div id="display">
17    </div>
18
19    <canvas id="canvas" width="300" height="300">
20        キャンバスの表示内容を説明する代替テキストです。
21    </canvas>
22
23    <script>
24            alert("test");
25    
26    const socket = io();
27
28      const clearText = () => {
29        document.getElementById('inputText').value = '';
30      }
31
32      const addMessageList = (message) => {
33        const ul = document.getElementById('messageList');
34        const li = document.createElement('li');
35        const text = document.createTextNode(message);
36        li.appendChild(text);
37        ul.appendChild(li);
38      };
39
40      document.getElementById('sendButton').addEventListener('click', () => {
41        let inputMessage = document.getElementById('inputText').value;
42
43        if (inputMessage === '') {
44          return;
45        }
46
47        socket.emit('sendMessage', inputMessage);
48        clearText();
49      });
50
51      socket.on('receiveMessage', (message) => {
52        addMessageList(message);
53      });
54
55      socket.on( 'connect', function () {
56 
57        // サーバから送られた画像を受け取って表示
58        socket.on( 'image', function( imageData ) {
59        if ( imageData ) {
60            alert("test2");
61
62            var canvas = document.createElement( 'canvas' );
63            var ctx = canvas.getContext( '2d' );
64            var img = new Image();
65            img.src = imageData;
66            img.onload = function() {
67                canvas.width = img.width;
68                canvas.height = img.height
69                ctx.drawImage( img, 0, 0);
70                document.body.appendChild( canvas );
71            }
72        }
73        });
74
75    });
76
77    // 相手ブラウザに画像を送る
78    function sendImage( event ) {
79
80        const canvas = document.getElementById("canvas");        
81        var ctx = canvas.getContext('2d'); 
82        var reader = new FileReader();
83        var file = event.target.files[0];
84
85        reader.onload = function( event ) {
86
87            var img = new Image();
88            
89            img.onload = function() {              
90                canvas.width  = img.naturalWidth; 
91                canvas.height = img.naturalHeight; 
92                ctx.drawImage(img, 0, 0);     
93            }                                       
94            img.src = event.target.result;  
95         
96            socket.emit( 'image', event.target.result );
97
98        };
99        reader.readAsDataURL( file );
100    }
101
102    var file = document.getElementById( 'file' );
103    file.addEventListener( 'change', sendImage, false );
104    
105    </script>
106
107  </body>
108</html>

試したこと

toDataURLというメソッドを使うのかな？と思ったのですが、
色々試しましたが上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

Node.js / v14.18.1
Express / 4.19.2
Socket.IO / 4.7.5

int32_t

2024/06/04 06:17

どこまで期待通りに動いているか確認しましたか? * 送信クライアントで画像表示が動いているかどうか * 送信クライアントでサーバに送るデータが期待通りの内容になっているか * 受信クライアントが受け取ったデータが期待通りの内容になっているかなど。

save6

2024/06/04 07:02

確認したところ、JPEG画像を送信するときはサーバー側に到達していないことが分かりました。 Chromeで確認したところ下記エラーが出ており、恐らくreader.readAsDataURL( file );のところでJPEGの場合はエラーになっていると思います。このエラー文言で検索したのですが、解決策が見当たらず何かご存じではないでしょうか？ Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

int32_t

2024/06/04 07:13

うーん、PNGとJPEGでそこに違いが出るとは思えないですが… とりあえず、readAsDataURL() の前に alert("file: " + file); でも足してみて、何が渡っているか確認ですかね。テストしているJPEGファイルがいつも同じものなら、違うディレクトリあるファイルも試してみるといいかもしれないです。

save6

2024/06/04 07:18

すみません、再度確認したところ上記エラーは出ていませんでした。申し訳ございません。エラーは出ていないのですがChromeの開発ツールのネットワークを確認するとJPEG画像が流れておらず、またサーバー側で到達した際にログを出すようにしているのですが、ログで出ていません。そのため、やはりJPEG画像のときにサーバー側に送られないということのようです。何かここを調べた方がいいなどありましたらご教授ください。

save6

2024/06/04 07:20

アドバイスありがとうございます！確認してみます

save6

2024/06/04 07:26

ありがとうございます！！いつもテストで送信しているJPEG画像を他のものにしたら普通に送れました！！ただ今度はなぜ送れないJPEGファイルがあるのかという壁が現れてしまったのですが、何かご存じなこと調べた方がいいこと、ございましたらお手数ですがまたご教示いただけると幸いです。

int32_t

2024/06/04 07:44

送れないファイルのときに canvas に画像は表示されてますか? 送れないファイルと送れるファイルで event.target.result の冒頭に違いはありますか? パーミションの関係とかファイル名になにか異常があるとか、ブラウザで動くコードの外の問題だと思います。

save6

2024/06/04 07:54

ご返信ありがとうございます！＞送れないファイルのときに canvas に画像は表示されてますか? 送れないファイルのときもcanvasに画像は表示されています。＞送れないファイルと送れるファイルで event.target.result の冒頭に違いはありますか? 確認したところ両方とも冒頭に同じ下記が記載されていたので問題ないかと思います。 file: data:image/jpeg;base64 ファイルの違いという示唆を頂いたので様々なファイルでテストしたのですが、 PNG画像でも送れない画像があることを発見しました。送れない画像と送れる画像で違いがないかと調べたのですが、送れない画像はファイル容量が比較的大きいファイルになっており(500KB以上)、送れるファイルは容量が小さいものが送れているように見えます(200KB以下) 念のためファイル名も変更して試しましたが、ファイル名ではないみたいです。 Windowsのローカル環境でのテストで本事象が発生しているためパーミッションは関係ないかと思います。ファイル容量でSocket.IOだと送れないっていうことがあるのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

送れない画像はファイル容量が比較的大きいファイルになっており(500KB以上)

socket.io はデフォルトで単一メッセージ 1MB という制限があります。
サーバ側で maxHttpBufferSize の値を増やすと解決するかもしれません。

投稿2024/06/04 08:03

int32_t

総合スコア21421

save6

2024/06/04 08:12

ご回答ありがとうございます！ const app = require("express")(); const httpServer = require("http").createServer(app); const options = { maxHttpBufferSize: 1e10 }; const io = require("socket.io")(httpServer, options); としたら解決しました(*´▽｀*) 本当に助かりました、ありがとうございました！！

行動規範の内容に同意します