Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- This is a Node+WebSocket powered demo to sync videos
across different browsers. This file is the client,
the other one is the Node server. Powered by Node and
http://github.com/miksago/node-websocket-server -->
<style>
.inactive { display: none; }
.active { display: block; }
</style>
<script>
var controller = null;
window.onload = function() {
if ($_("#name").value == "")
$_("#name").value = "user"+parseInt(99999*Math.random());
var conn;
$_("#join").onclick = function() {
conn = new WebSocket("ws://localhost:8000/test");
$_("#username").innerHTML = $_("#name").value
$_("#room").className = "active";
$_("#registration").className = "inactive";
var video = $_("video");
video.addEventListener("timeupdate", function() {
if (iAmControlling()) conn.send(video.currentTime);
}, true);
video.addEventListener("pause", function() {
if (iAmControlling()) conn.send("pause "+video.currentTime);
}, true);
conn.onmessage = function (ev) {
var matches;
if (matches = ev.data.match(/^control (.+)$/)) {
$_("#controller").innerHTML = matches[1];
} else if (matches = ev.data.match(/^userCount (.+)$/)) {
// $_("#userCount").innerHTML = matches[1];
document.getElementById("userCount").innerHTML = matches[1];
} else if (matches = ev.data.match(/^pause (.+)$/)) {
video.currentTime = matches[1];
video.pause();
} else {
if (iAmControlling()) return;
var estimatedTimeOnMaster = parseInt(ev.data)+1;
if (Math.abs(estimatedTimeOnMaster-video.currentTime)>5)
video.currentTime = estimatedTimeOnMaster;
if (video.paused) video.play();
}
};
$_("#takeControl").onclick = function(ev) {
conn.send("control "+$_("#name").value);
};
$_("#leave").onclick = function() {
conn.close();
$_("#room").className = "inactive";
$_("#registration").className = "active";
};
};
};
function iAmControlling() {
return $_("#controller").innerHTML == $_("#name").value;
}
function $_(sel) {
return document.querySelector(sel);
}
</script>
<div id="registration" class="active">
<p>Username: <input id="name" /> <button id="join">Join Room</button></p>
</div>
<div id="room" class="inactive">
User: <span id="username"></span>
<button id="leave">Leave Room</button>
<p>Users: <span id="userCount"></span></p>
<p>Controller: <span id="controller">---</span> <button id="takeControl">Take Control</button></p>
<p><video src="popeye.mp4" controls></video></p>
</div>
var sys = require("sys");
var ws = require('../lib/ws');
var userCount = [];
var server = ws.createServer({
debug: true
});
server.addListener("connection", function(conn){
server.broadcast("userCount " + ++userCount);
conn.addListener("message", function(message){
server.broadcast(message);
});
});
server.addListener("close", function(conn){
server.broadcast("userCount " + --userCount);
});
server.listen(8000, "localhost");
function log(msg) {
sys.puts(+new Date + ' - ' + msg.toString());
};
@j3dyy

This comment has been minimized.

Copy link

commented Jul 21, 2015

hello i getting this error
WebSocket connection to 'ws://localhost:3000/' failed: Connection closed before receiving a handshake response
(index):50 WebSocket is already in CLOSING or CLOSED state.

@Jairos2015

This comment has been minimized.

Copy link

commented Nov 10, 2015

turikelaj: port >> 8000 on example.>> localhost:8000

@davronakil

This comment has been minimized.

Copy link

commented Jan 14, 2016

Set this up locally and pointed the JS file to the Web Socket library. When running node with node video-server.js I'm getting the following:

node video-server.js 
module.js:338
    throw err;
          ^
Error: Cannot find module 'lib/ws/'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/davron/Sites/vybesync.com/dev/websocket/video-server.js:2:10)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)

Any ideas?

Thanks

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.