Skip to content

Instantly share code, notes, and snippets.

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 -->
.inactive { display: none; }
.active { display: block; }
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 =^control (.+)$/)) {
$_("#controller").innerHTML = matches[1];
} else if (matches =^userCount (.+)$/)) {
// $_("#userCount").innerHTML = matches[1];
document.getElementById("userCount").innerHTML = matches[1];
} else if (matches =^pause (.+)$/)) {
video.currentTime = matches[1];
} else {
if (iAmControlling()) return;
var estimatedTimeOnMaster = parseInt(;
if (Math.abs(estimatedTimeOnMaster-video.currentTime)>5)
video.currentTime = estimatedTimeOnMaster;
if (video.paused);
$_("#takeControl").onclick = function(ev) {
conn.send("control "+$_("#name").value);
$_("#leave").onclick = function() {
$_("#room").className = "inactive";
$_("#registration").className = "active";
function iAmControlling() {
return $_("#controller").innerHTML == $_("#name").value;
function $_(sel) {
return document.querySelector(sel);
<div id="registration" class="active">
<p>Username: <input id="name" /> <button id="join">Join Room</button></p>
<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>
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.addListener("close", function(conn){
server.broadcast("userCount " + --userCount);
server.listen(8000, "localhost");
function log(msg) {
sys.puts(+new Date + ' - ' + msg.toString());

This comment has been minimized.

Copy link

j3dyy 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.


This comment has been minimized.

Copy link

Jairos2015 commented Nov 10, 2015

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


This comment has been minimized.

Copy link

davronakil 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 
    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/
    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?


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.