Webdis を使った在席表 #Redis

canvas で作る在席表　のデータソースを JSON から、Redis に替えました。
Redis へは、Webdis 経由でアクセスします。

Redis へデータを入れる

status.json

{
"id0001": {"name": "中島","office": true},
"id0002": {"name": "長谷川","office": false},
"id0003": {"name": "藤田","office": false},
"id0004": {"name": "青山","office": true},
"id0005": {"name": "川上","office": true},
"id0006": {"name": "吉田","office": true},
"id0007": {"name": "小林","office": false},
"id0008": {"name": "坂本","office": true},
"id0009": {"name": "安藤","office": false},
"id0010": {"name": "中村","office": true}
}

data_prepare.js

#! /usr/bin/node
// ---------------------------------------------------------------
//	data_prepare.js
//
//					Aug/02/2023
//
// ---------------------------------------------------------------
'use strict'

var fs = require("fs")

const redis = require('redis')

// ---------------------------------------------------------------
function data_prepare_proc ()
{
	var dict_aa = new Object ()

	const file_json = "status.json"

	const json_str = fs.readFileSync (file_json,'utf8')

	try
		{
		dict_aa = JSON.parse (json_str)
		}
	catch (error)
		{
		console.error ("*** error *** from JSON.parse ***")
		console.error (error)
		}

	
	return	dict_aa
}

// ---------------------------------------------------------------
async function create_proc(options)
{
	var dict_aa = data_prepare_proc ()

	const client = redis.createClient()
	await client.connect()

	const keys = Object.keys(dict_aa)

	for (var it in keys)
		{
		const key = keys[it]
		const str_json = JSON.stringify (dict_aa[key])
		console.log(key,str_json)
		try
			{
			await client.set(key, str_json)
			}
		catch (error)
			{
			console.error ("*** error *** from client.set ***")
			console.error (error)
			console.error (key)
			}

		}

	await client.disconnect()
	console.error ("*** 終了 ***")	
}

// ---------------------------------------------------------------
console.error ("*** 開始 ***")

create_proc({ argv: process.argv })

// ---------------------------------------------------------------

Web ページ

zaiseki_redis.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="zaiseki_redis.js"></script>
<title>在席表</title>
</head>
<body>
<div>
<canvas id="bar_area" width="400" height="600"></canvas>
</div>
<hr />
version Aug/02/2023 PM 14:00<p />
</body>
</html>

zaiseki_redis.js

// -------------------------------------------------------------------------
//	zaiseki_redis.js
//
//						Aug/02/2023
// -------------------------------------------------------------------------
window.onload = ()=>
{
	const url_keys = "http://localhost:7379/keys/id*"

	p01_proc (url_keys)
}

// -------------------------------------------------------------------------
async function p01_proc (url_keys)
{
	const data_a = await fetch(url_keys)
	const res_a = await data_a.json()
	const keys_a = res_a.keys
	console.log(keys_a)

	var dict_bb = {}

	var icount = 0
	keys_a.forEach (async function (key,index)
		{
		const url_key = "http://localhost:7379/GET/" + key

		const data = await fetch(url_key)
		const res = await data.json()

		dict_bb[key] = JSON.parse(res.GET)
		icount += 1

		if (icount == keys_a.length)
              		{
			display_proc (dict_bb)
			}
		})
}

// -------------------------------------------------------------------------
// [4]:
function display_proc (dict_aa)
{
	var bar = document.getElementById('bar_area')
	var ctx = bar.getContext('2d')

	ctx.font = "18px 'ＭＳ Ｐゴシック'"
	ctx.strokeStyle = "black" 

	const delt_y = 40

	const xx = 100
	var yy = 30
	ctx.strokeText("在席表",xx + 20,yy)

	yy = 70
	ctx.strokeStyle = "blue" 
	for (var key in dict_aa)
		{
		const unit = dict_aa[key]
		ctx.strokeText(unit.name,xx,yy)
		var color = 'red'
		if (unit.office)
			{
			color = 'green'
			} 

		draw_circle_proc (ctx,xx+100,yy-8,color)
		yy += delt_y
		}
}

// -------------------------------------------------------------------------
// [4-4]:
function  draw_circle_proc (ctx,xx,yy,color)
{
	const radius = 10
	ctx.beginPath()
	ctx.fillStyle = color
	ctx.arc (xx,yy,radius,0,Math.PI*2,false)
	ctx.fill()
	ctx.closePath()
	ctx.stroke()
}

// -------------------------------------------------------------------------

redis と、webdis が動いている必要があります。

$ systemctl status redis
● redis.service - Advanced key-value store
     Loaded: loaded (/usr/lib/systemd/system/redis.service; disabled; preset: d>
     Active: active (running) since Wed 2023-08-02 09:18:59 JST; 9h ago
   Main PID: 2016 (redis-server)
     Status: "Ready to accept connections"
      Tasks: 5 (limit: 37748)
     Memory: 8.2M
        CPU: 18.629s
     CGroup: /system.slice/redis.service
             └─2016 "/usr/bin/redis-server 127.0.0.1:6379"

$ systemctl status webdis
● webdis.service - REST server for Redis data
     Loaded: loaded (/usr/lib/systemd/system/webdis.service; disabled; preset: >
     Active: active (running) since Wed 2023-08-02 10:48:45 JST; 7h ago
    Process: 9990 ExecStart=/usr/bin/webdis /etc/webdis.prod.json (code=exited,>
   Main PID: 9991 (webdis)
      Tasks: 5 (limit: 37748)
     Memory: 2.8M
        CPU: 60ms
     CGroup: /system.slice/webdis.service
             └─9991 /usr/bin/webdis /etc/webdis.prod.json

参考ページ
Webdis の使い方

Webdis を使った 在席表

Redis へデータを入れる

Web ページ

Webdis を使った在席表