n0mimono/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <title>---</title>
</head>

<body>
    <div class="base">
        <div class="button">
            <button type="button" id="down" class="btn btn-primary btn-lg">-1</button>
        </div>
        <div class="button">
            <button type="button" id="up" class="btn btn-primary btn-lg">+1</button>
        </div>
    </div>
    <script>
        var sock = new WebSocket('ws://192.168.179.8:5001');

        sock.addEventListener('open', function (e) {
        });

        sock.addEventListener('message', function (e) {
            console.log(e.data)
        });

        document.addEventListener('DOMContentLoaded', function (e) {
            document.getElementById('down').addEventListener('click', function (e) {
                sock.send('down');
            });
            document.getElementById('up').addEventListener('click', function (e) {
                sock.send('up');
            });
        });
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
</body>

</html>

## index.ts
import express from 'express'
import fs from 'fs'
import path from 'path'

let templates = {
    index: fs.readFileSync('index.html'),
}

let app = express()

app.listen(8080, () => {
    console.log('-- listen http://localhost:8080')
})

app.use(express.static(path.join(__dirname, 'public')))

app.get('/', (_, res, __) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(templates.index);
})

## package.json
{
  "name": "mini-pubsub",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "dev": "./node_modules/.bin/ts-node index.ts",
    "pubsub": "./node_modules/.bin/ts-node pubsub.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.17.2",
    "express": "^4.17.1",
    "ts-node": "^8.6.2",
    "ws": "^7.2.1"
  },
  "devDependencies": {
    "@types/node": "^13.7.4",
    "@types/ws": "^7.2.1",
    "typescript": "^3.8.2"
  }
}

## pubsub.ts
import websocket from 'ws'

let wss = new websocket.Server({ port: 5001 })
wss.on('connection', ws => {
    console.log('-- connected')
    ws.on('message', msg => {
        console.log('-> ' + msg.toString())
        wss.clients.forEach(client => {
            client.send(msg)
        })
    })

    ws.on('close', () => {
        console.log('-- closed')
    })
})

## tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2017"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": false
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<title>---</title>
	</head>

	<body>
	<div class="base">
	<div class="button">
	<button type="button" id="down" class="btn btn-primary btn-lg">-1</button>
	</div>
	<div class="button">
	<button type="button" id="up" class="btn btn-primary btn-lg">+1</button>
	</div>
	</div>
	<script>
	var sock = new WebSocket('ws://192.168.179.8:5001');

	sock.addEventListener('open', function (e) {
	});

	sock.addEventListener('message', function (e) {
	console.log(e.data)
	});

	document.addEventListener('DOMContentLoaded', function (e) {
	document.getElementById('down').addEventListener('click', function (e) {
	sock.send('down');
	});
	document.getElementById('up').addEventListener('click', function (e) {
	sock.send('up');
	});
	});
	</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
	</body>

	</html>
	import express from 'express'
	import fs from 'fs'
	import path from 'path'

	let templates = {
	index: fs.readFileSync('index.html'),
	}

	let app = express()

	app.listen(8080, () => {
	console.log('-- listen http://localhost:8080')
	})

	app.use(express.static(path.join(__dirname, 'public')))

	app.get('/', (_, res, __) => {
	res.writeHead(200, { 'Content-Type': 'text/html' });
	res.end(templates.index);
	})
	{
	"name": "mini-pubsub",
	"version": "1.0.0",
	"description": "",
	"main": "index.ts",
	"scripts": {
	"dev": "./node_modules/.bin/ts-node index.ts",
	"pubsub": "./node_modules/.bin/ts-node pubsub.ts"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"@types/express": "^4.17.2",
	"express": "^4.17.1",
	"ts-node": "^8.6.2",
	"ws": "^7.2.1"
	},
	"devDependencies": {
	"@types/node": "^13.7.4",
	"@types/ws": "^7.2.1",
	"typescript": "^3.8.2"
	}
	}
	import websocket from 'ws'

	let wss = new websocket.Server({ port: 5001 })
	wss.on('connection', ws => {
	console.log('-- connected')
	ws.on('message', msg => {
	console.log('-> ' + msg.toString())
	wss.clients.forEach(client => {
	client.send(msg)
	})
	})

	ws.on('close', () => {
	console.log('-- closed')
	})
	})
	{
	"compilerOptions": {
	"allowJs": true,
	"allowSyntheticDefaultImports": true,
	"jsx": "preserve",
	"lib": [
	"dom",
	"es2017"
	],
	"module": "commonjs",
	"moduleResolution": "node",
	"noEmit": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": false,
	"skipLibCheck": true,
	"sourceMap": true,
	"strict": true,
	"target": "es5",
	"forceConsistentCasingInFileNames": true,
	"esModuleInterop": true,
	"resolveJsonModule": true,
	"isolatedModules": false
	},
	"exclude": [
	"node_modules"
	],
	"include": [
	"next-env.d.ts",
	"*/.ts",
	"*/.tsx"
	]
	}