Skip to content

Instantly share code, notes, and snippets.

@mala mala/app.js
Last active Apr 26, 2017

Embed
What would you like to do?
markdownで書かれた複数のスライドをwebsocketで同期して表示するやつ
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));
});
});
<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
You can’t perform that action at this time.