myFare cardアプリのアップデート

以下の記事からのアップデートになります。

https://isehara-3lv.sakura.ne.jp/blog/2023/04/14/golangでwebsocketの実装/

カードリーダーにタッチで参加登録してブラウザで状況が見れる、追加で参加登録があるとwebsocketでその旨のメッセージを表示(画面更新はマニュアル)、発表者は登録のリンクをクリック(トグルになっています、Wi-Fi内の限定ユーザーなのでpwとかは要求しません)すると発表登録というアプリです。

コードの構成は、

uid.jsonはuidとnameのjson形式ファイルです。

全体のコードは、

https://github.com/chateight/golang/tree/master/myfare

になりますが、websocket経由メッセージのブロードキャストのためにコードは以下のようなっています(main.goの部分抜き出し)

① 新規参加者の登録あればその旨のメッセージをserial.goからチャネル経由でmain.goに通知する

② wsはブラウザからのリクエストの都度新規に作成されるから、通知内容が消滅しないようにmain.goの中で共通エリアに保存

③ 余計なwsを消すために、ブラウザから定期的にwebsocket経由でメッセージ送ってforループ内でタイムアウト(今は3秒に設定)すれば未使用wsと判断して終了させる、clients[ws] = trueで確認できるようにしてます

④ ②で保存された通知内容は各ws内で未送信(前回送付と同じかどうか判定、つまり同じ内容は2回以上送らない)であれば送信するが送信条件はタイマーで設定、チャネルから受信と並列条件としています

スマートではなさそうだからもっと別の方法がありそうです。

func msgHandler(ws *websocket.Conn) {
	defer ws.Close()

	clients[ws] = true
	fmt.Println(clients)

	premsg := msg	// initialize websocket message
	t := time.NewTicker(500 * time.Millisecond)
	defer 	t.Stop()
label:
	for {
		msgr := ""
        err := websocket.Message.Receive(ws, &msgr)
		if err != nil {
			//log.Println("receive error")		// main pupose is to check timeout (to detect unused session)
			break label
		}

		select {
			// to send websocket message triggered by the timer
			// the reason to separate receive and send is ws are running multi thread
		case <- t.C:
			if premsg != msg {
				premsg = msg
				err := websocket.Message.Send(ws, msg)
				if err != nil {
					log.Println("send err")
					break label
				}
			}
		case name := <- uidSerial.Notice:	// wait for message from serial.go via channel
			mu.Lock()
			msg = name.(string)
			mu.Unlock()
		}
	}
	clients[ws] = false
}

 

admin

Golangでwebsocketの実装

websocket自体はRFCで規定されているものですが、実装はそれぞれの言語ごとに存在します。

サンプルは、

https://zenn.dev/empenguin/articles/bcf95c19451020

元を辿ると、おそらくこちら。

https://echo.labstack.com/cookbook/websocket/

他の言語の例に漏れず、クライアント側のJavaScriptとサーバー側のGoのスクリプトが連携して動作します。ディレクトリ構成は以下の通りです。

<main.goのリクエスト処理部分>

func handleWebSocket(c echo.Context) error {
	websocket.Handler(func(ws *websocket.Conn) {
		defer ws.Close()

		// 初回のメッセージを送信
		err := websocket.Message.Send(ws, "Server: Hello, Client!")
		if err != nil {
			c.Logger().Error(err)
		}

		for {
			// Client からのメッセージを読み込む
			msg := ""
			err = websocket.Message.Receive(ws, &msg)
			if err != nil {
				//c.Logger().Error(err)
			}

			// Client からのメッセージを元に返すメッセージを作成し送信する
			err := websocket.Message.Send(ws, fmt.Sprintf("Server: \"%s\" received!", msg))
			if err != nil {
				//c.Logger().Error(err)
			}
		}
	}).ServeHTTP(c.Response(), c.Request())
	return nil
}

最初のページリクエスト後はwebsocketのループに入るので、ここでページのリロード(複数回ルートのリクエスト)をするとループ処理(for loop)でエラーが発生します。

一点疑問はwebsocketのポート番号指定をどこでやっているのかわからないこと。

P.S. 2023/4/15

ポートはHTTPと同じポートが使われています。WSはHTTPとは異なるプロトコルなので同じポートでも問題はないようですね。

 

admin

ラズパイでWebSocket通信(その3)

 

https://isehara-3lv.sakura.ne.jp/blog/2022/11/29/ラズパイでwebsocket通信(その2)/

の続編で、

① M5stackからラズパイにUDPでデータ送信して、

② ラズパイとクライアント間でweb_socket使ってリアルタイムのデータ更新(今は5秒毎にM5stackから送信)、

③ 受信データをchart.js使ってグラフ化(データ最大5回分)、

します。

WebSocketで送られるデータ形式は汎用性考慮してjson形式を使っています。

全体のコードは、

M5stack側、

https://github.com/chateight/multi_sensor_udp_comm

ラズパイ側、

https://github.com/chateight/web_socket

となります。現状、測定値を送信するのはthermo_sensorのコードだけですが、他のセンサーでも同じルーチン(udp_loop(String))呼び出せば送信できます。

web_socketはセッションが有効な時しか働かないので、セッションが切れればデータは更新されません。

ブラウザ画面の表示はこちらを、

m5stack_ws – 720WebShareName

 

admin

ラズパイでWebSocket通信(その2)

ラズパイでWebSocketの環境構築

の続編です。

Expressのプロジェクトのviews以下に以下のファイルを配置しました。pugファイルの継承機能の確認も兼ねています。block inheriの直下にblock contentがあるので、index.pugの内容が挿入されて結果として作成されるHTMLファイルは複数のpugファイルから構成されます。

layout.pug
--------------
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    <script src="./javascripts/ws_client.js" defer>
  body
    block inheri<


inheri.pug
--------------
extends layout
block inheri
  block content
  p Test site for M5stack data transfer using UDP & WebSocket
  p#message.poor-writing ws test button

  <input type="button" id="send_server" value="send" />

  <div id="mes">web socket out put area</div>

index.pug 
-------------- 
extends inheri 

block content 
  h1= title 
  p #{title} is provided for timely data access 
  p ----------------------------------------------

クライアント側で動作するws_client.jsとサーバー側で動作するws_server.jsスクリプトです。いずれもpublic/javascriptsに配置してます。

ブラウザ上のbuttonを押すとサーバー側ではws_server.jsが検出して、サーバー側からレスポンスを返しています。

ws_client.js
--------------
        const ws = new WebSocket('ws://raspberrypi.local:3002')
 
        ws.onopen = e => {
            console.log('Hello M5 server!')
        }

        ws.onmessage = e => {
            const mes = document.querySelector("#mes");
	        mes.textContent = e.data;

            console.log('received data:%s',e.data)
            console.log(e)
        }


        ws.onerror = e => {
            console.log('fail to connect:${e.data}')
            console.log(e)
        }

        document.getElementById('send_server').addEventListener('click', () => {
            ws.send('call back from the button')
        })


ws_server.js
--------------
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 3002 });

wss.on('connection', ws_client => {

  ws_client.send('good morning');

  ws_client.on('message', data => {
    console.log('send data: %s', data);
    ws_client.send('received the data:' + data);
  });
});

<起動>

Express:

$ npm start

WS:

$ node ws_server.js

別々に起動してもいいけど、おそらくExpress側で起動する様にできるはず。

ブラウザ画面の動画

以下の画面操作の動画です。

参考サイトは、

pugの継承

https://qiita.com/zenno04/items/d16f881170170b567b16

簡単ws使い方

https://ai-soldier.work/websocket-node-ws/

 

次にやりたいことはM5stackと以下のようにつなぐこと、Port 3000は共通ですが、UDPとTCP/IPの違いなので問題ありません。

 

admin