Skip to content

Instantly share code, notes, and snippets.

@mahemoff
Created June 18, 2010 17:28
Show Gist options
  • Star 33 You must be signed in to star a gist
  • Fork 19 You must be signed in to fork a gist
  • Save mahemoff/443933 to your computer and use it in GitHub Desktop.
Save mahemoff/443933 to your computer and use it in GitHub Desktop.
<!-- 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
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.

@Jairos2015
Copy link

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

@davronakil
Copy link

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