More than 1 year has passed since last update.

Webdis を使った在席表

Last updated at 2023-08-02Posted at 2018-01-03

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 の使い方

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Webdis を使った 在席表

Redis へデータを入れる

Web ページ

Webdis を使った在席表