Node.jsのSerialportで取得したデータをsocket.ioで送りたいが、クライアント側に認識されない

いつもお世話になっております。言葉足らずで分かりずらかったら申し訳ないです。
Node.jsのSerialportで取得したデータをsocket.ioのsocket.emitでクライアント側に送信、ブラウザで取得したデータを表示したいのですがsocket.onで認識されません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8" />
5    <title>TEST</title>
6</head>
7<body>
8    <img src="default.png" alt="">
9    <div id="message">message waiting...</div>
10    <script type="text/javascript">
11    </script>
12    <script src="/socket.io/socket.io.js"></script>
13    <script>
14    var socket = io('http://localhost:3000');
15    console.log('connection');
16    socket.on('status', (data)=>{
17        document.getElementById('message').innerText = data.message.trim();
18        console.log(data);
19    });
20    </script>
21</body>
22</html>

Node.js
1const express = require('express');
2const app = express();
3const http = require('http').Server(app);
4const io = require('socket.io')(http);
5const fs = require('fs');
6
7app.use(express.static(__dirname));
8
9//html読み込み
10app.get('/',function(req,res) {
11    res.sendFile(__dirname + './index.html');
12});
13
14//画像読み込み
15app.get('/image', (req, res) => {
16    fs.readFile('./default.png', (err, image) => {
17      res.type('png');
18      res.send(image);
19    });
20});
21
22//サーバー開く
23http.listen(3000,function(){
24    console.log('server listening. Port:3000');
25});
26
27//Arduinoとのシリアル通信
28const SerialPort = require('serialport');
29const port = new SerialPort('COM4',{baudRate: 9600});
30let parser = new SerialPort.parsers.Readline;
31port.pipe(parser);
32let formatCSV = '';
33let testArr = [];
34
35let reader = require('readline').createInterface({
36    input: process.stdin
37});
38
39reader.on('line',function(line){
40    port.write(new Buffer(line+'\n'));
41});
42
43//シリアル通信で取得したデータをsocket.ioでクライアントに送信
44io.once('connection',(socket)=>{
45    parser.on('data',(data)=>{
46        socket.emit('status',data);
47        console.log(data);
48        testArr.push([data]);
49        exportCSV(testArr);
50        formatCSV = "";
51    });
52});
53
54// 配列をcsvで保存するfunction
55function exportCSV(content){
56	for (var i = 0; i < content.length; i++) {
57		var value = content[i];
58
59		for (var j = 0; j < value.length; j++) { var innerValue = value[j]===null?'':value[j].toString(); var result = innerValue.replace(/"/g, '""'); if (result.search(/("|,|\n)/g) >= 0)
60		if (j > 0)
61		formatCSV += ',';
62		formatCSV += result;
63	  }
64	  formatCSV += '\n';
65	}
66	fs.writeFile('test.csv', formatCSV, 'utf8', function (err) {
67	  if (err) {
68		console.log('保存できませんでした');
69	  } else {
70		console.log('保存できました');
71	  }
72	});
73  }

Node.jsのconsole.log

server listening. Port:3000
26.50,528
保存できました
26.50,510
保存できました
26.50,524
保存できました
26.50,528
保存できました

クライアント側のconsole.log

connection

試したこと

expressを使う前はうまくいっていたのですが、画像やcssファイルを読み込むのにexpressが必要だなと思いexpressで書き換えてみたらデータの送信がうまくいかなくなりました。対処法ご存じの方ぜひご指摘お願いします。

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

回答1件

自己解決

io.once('connection',(socket)=>{
    parser.on('data',(data)=>{
        socket.emit('status',data);
        console.log(data);
        testArr.push([data]);
        exportCSV(testArr);
        formatCSV = "";
    });
});

io.onceの中のparser.on...の処理を外に出したら無事動きました。

投稿2021/09/28 13:54

cyoncooo

総合スコア2