Last active
April 26, 2017 01:11
-
-
Save mala/2f3e8388dd186311b785645352fd1fe8 to your computer and use it in GitHub Desktop.
markdownで書かれた複数のスライドをwebsocketで同期して表示するやつ
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
| var express = require("express"); | |
| var app = express(); | |
| var expressWs = require('express-ws')(app); | |
| app.use(express.static(__dirname + '/public')); | |
| app.listen(3000, function () { | |
| console.log('Example app listening on port 3000!'); | |
| }); | |
| app.ws('/state', function(ws, req) { | |
| ws.on('message', function(msg) { | |
| expressWs.getWss().clients.forEach(client => client.send(msg)); | |
| }); | |
| }); |
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
| <html> | |
| <head> | |
| <title>presen tool</title> | |
| <link rel="stylesheet" href="presen.css"> | |
| </head> | |
| <body> | |
| <div id="slide"></div> | |
| <script src="marked.js"></script> | |
| <script> | |
| function Presen(filename){ | |
| var data; | |
| var state = { _page: 0 }; | |
| Object.defineProperty(state, "page", { | |
| get: () => state._page, | |
| set: (v) => { state._page = v; update() } | |
| }); | |
| var update = function(){ | |
| console.log(state.page); | |
| var src = data[state.page] || ""; | |
| var html = marked(src); | |
| document.getElementById("slide").innerHTML = html; | |
| }; | |
| var init = function(){ | |
| fetch(filename).then(res => res.text()).then(text => { | |
| data = text.split("----"); | |
| update(); | |
| }); | |
| }; | |
| var connected = false; | |
| var ws; | |
| var start_watcher = function(){ | |
| if (connected) return; | |
| ws = new WebSocket("ws://" + location.host + "/state"); | |
| ws.onopen = e => { | |
| connected = true; | |
| ws.onmessage = e => { | |
| console.log(e); | |
| var message = JSON.parse(e.data); | |
| console.log(message); | |
| state.page = message._page; | |
| }; | |
| }; | |
| ws.onclose = e => { | |
| connected = false; | |
| }; | |
| }; | |
| var key_listener = function(){ | |
| document.onkeydown = (e) => { | |
| console.log(e.keyCode); | |
| if (e.keyCode == 39 || e.keyCode == 40) { state.page++} | |
| if (e.keyCode == 37 || e.keyCode == 38) { state.page--} | |
| ws.send(JSON.stringify(state)); | |
| } | |
| }; | |
| key_listener(); | |
| setInterval(start_watcher, 1000); | |
| init(); | |
| } | |
| var url = (location.hash.indexOf("en") != -1) ? "main_en.txt" : "main.txt"; | |
| Presen(url); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment