Next.js でシリアル通信を実現する

バックエンド

バックエンドでは主にシリアル通信データの収集と SSE 通信を行う。

事前準備

serial-port.js ファイルを作成し、パッケージの導入と変数の定義をする。

1
2
3
4


import { SerialPort } from 'serialport'
import http from 'http'

let data

シリアル通信

以下のコードを serial-port.js に書いてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


const port = new SerialPort({
        path: 'COM4',
        baudRate: 115200
    }, function(err) {
        if (err) {
        return console.log('Error on write: ', err.message);
    }
    console.log('Find the port');
});

port.on('data', function(temp) {
    console.log('Data:', temp);
    data = temp.toString('utf8');
});

port.on('error', function(err) {
    console.log('Error: ', err.message);
});

SSE 通信

ここでは8080ポートを使う。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


const server = http.createServer((req, res) => {
    if (req.url === '/stream') {
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive',
            'Access-Control-Allow-Origin': 'http://localhost:3000',
            'Access-Control-Allow-Headers': 'Content-Type'
        });
        const sendData = () => {
            if (data && data.length > 2 ) {
                res.write(`data: ${data}\r\n\r\n`);
            }   
        };
        const interval = setInterval(sendData, 1000);
        req.on('close', () => clearInterval(interval));
    } else {
        res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
        res.end('<p>waitting for data...</p>');
    }
});

server.listen(8080, () => {
    console.log('Server running on http://localhost:8080/stream');
});

そしてターミナルで node .\serial-port.js を実行し、シリアル通信ができた。

パッケージが見つからない場合 npm install <package name> を試してください。

フロントエンド

React アプリの作成

ここでは Next.js (App Router)を使う。

1

npx create-next-app@latest

Windows の場合、Set-ExecutionPolicy RemoteSigned -Scope Process で権限を与える必要がある。

page.tsx

パッケージの導入。

1

import { useEffect } from "react";

Home() 関数の return() にデータを表示するための HTML コードを追加する。

1

<pre id="data-output"></pre>

SSE 通信からのデータを受けてサイト側に表示する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


export default function Home() {
  useEffect(() => {
    const sse = new EventSource('http://localhost:8080/stream');
    const pre = document.getElementById('data-output');
    sse.onmessage = (event) => {
      console.log('Serial Port Data: ', event.data);
      if (pre) {
        pre.textContent += event.data + '\n';
        pre.scrollTop = pre.scrollHeight; // Auto scroll to bottom
      }
    };
    return () => {
      sse.close();
    };
  }, []);

実行

サイトを構築する。

1

npm run build

サイトを実行する。

1

npm run dev