Last active
February 24, 2018 04:47
-
-
Save dthtvwls/10ee9833b4e8ce9ae7a9f87ad1ee4e3e to your computer and use it in GitHub Desktop.
crossfader shim backend with socket.io
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const express = require('express') | |
| const app = express() | |
| const http = require('http') | |
| const server = http.createServer(app) | |
| const socket = require('socket.io') | |
| const io = socket(server) | |
| let config = { | |
| servers: ['example.com', 'example.net'], | |
| subtrahend: 0 | |
| } | |
| io.on('connection', socket => { | |
| socket.send(config) | |
| socket.on('message', data => { | |
| config = data | |
| socket.send(config) | |
| }) | |
| }) | |
| // CORS middleware | |
| app.use((req, res, next) => { | |
| res.header('Access-Control-Allow-Origin', '*') | |
| res.header('Access-Control-Allow-Methods', 'PUT') | |
| res.header('Access-Control-Allow-Headers', 'Content-Type') | |
| next() | |
| }) | |
| // JSON body parser | |
| app.use(express.json()) | |
| app.get('/crossfader', (req, res) => res.json(config)) | |
| app.put('/crossfader', (req, res) => { | |
| config = req.body | |
| res.end() | |
| }) | |
| app.use(express.static('public')) | |
| const port = process.env.PORT || 3000 | |
| server.listen(port, () => console.log(`Example app listening on port ${port}!`)) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Crossfader</title> | |
| <link rel="stylesheet" href="/css/main.css"> | |
| </head> | |
| <body> | |
| <canvas id="chart"></canvas> | |
| <div id="controls"> | |
| <input id="left-server"><input id="right-server"><br> | |
| <input id="subtrahend" type="range" max="256"> | |
| </div> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script src="/js/vendor/Chart-2.3.0.min.js"></script> | |
| <script src="/js/main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| 'use strict' | |
| const leftServer = document.getElementById('left-server') | |
| const rightServer = document.getElementById('right-server') | |
| const subtrahend = document.getElementById('subtrahend') | |
| const makeColor = () => { | |
| const octet = () => Math.floor(Math.random() * 16).toString(16) | |
| return '#' + octet() + octet() + octet() | |
| } | |
| const chart = new Chart(document.getElementById('chart'), { | |
| type: 'bar', | |
| data: { | |
| datasets: [{ | |
| backgroundColor: [makeColor(), makeColor()], | |
| data: [0, 0], | |
| label: 'weight' | |
| }], | |
| labels: ['', ''] | |
| }, | |
| options: { | |
| legend: { display: false }, | |
| scales: { | |
| yAxes: [{ | |
| ticks: { | |
| beginAtZero: true, | |
| suggestedMax: 256 | |
| } | |
| }] | |
| } | |
| } | |
| }) | |
| const socket = io() | |
| socket.on('message', data => { | |
| chart.data.datasets[0].data = [256 - data.subtrahend, data.subtrahend] | |
| chart.update() | |
| if (leftServer !== document.activeElement) leftServer.value = data.servers[0] | |
| if (rightServer !== document.activeElement) rightServer.value = data.servers[1] | |
| if (subtrahend !== document.activeElement) subtrahend.value = data.subtrahend | |
| leftServer.disabled = data.subtrahend !== 256 | |
| rightServer.disabled = data.subtrahend !== 0 | |
| }) | |
| const put = () => { | |
| socket.send({ | |
| servers: [leftServer.value, rightServer.value], | |
| subtrahend: parseInt(subtrahend.value) | |
| }) | |
| } | |
| leftServer.addEventListener('blur', put) | |
| rightServer.addEventListener('blur', put) | |
| subtrahend.addEventListener('input', put) | |
| subtrahend.addEventListener('change', put) | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment