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 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 Jairos2015 commented Nov 10, 2015

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


This comment has been minimized.

Copy link

@davronakil 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