hi master i've problem about node js
I've run this on chrome and developer tools give me warning :
Error during WebSocket handshake: 'Sec-WebSocket-Accept' header is missing
and I run this on mozilla firefox and firebug give me notice :
error client.js (line 28)
Websocket Closed client.js (line 23)
Firefox can't establish a connection to the server at ws://192.168.2.4:8001/.
var ws = new WebSocket("ws://192.168.2.4:8001/"),
I'm using node.js 0.10.28
what must I do?
this is the code :
apps.js
var http = require('http');
var fs = require('fs');
var ws = require('websocket-server');
// var ws = require('websocket');
var sys = require("sys");
var path = require('path');
//create websocket server
var ws_server = ws.createServer();
/**
* Setup simple http server to serve static page elements on port 8000
*/
http.createServer(function (request, response) {
console.log('request starting...');
var filePath = '.' + request.url;
if (filePath == './')
filePath = './index.html';
var extname = path.extname(filePath);
var contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
}
path.exists(filePath, function(exists) {
if (exists) {
fs.readFile(filePath, function(error, content) {
if (error) {
response.writeHead(500);
response.end();
}
else {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
}
});
}
else {
response.writeHead(404);
response.end();
}
});
}).listen(8000);
// Handle WebSocket Requests
ws_server.addListener("connection", function(conn){
//add listener to rebroadcast incomming messages
conn.addListener("message", function(msg){
console.log('message');
conn.broadcast(msg);
});
});
ws_server.addListener("error", function(){
console.log(Array.prototype.join.call(arguments, ", "));
});
ws_server.addListener("disconnected", function(conn){
ws_server.broadcast("<"+conn.id+"> disconnected");
});
//start websocket server on port 8001
ws_server.listen(8001);
and it's code on client.js
var ws = new WebSocket("ws://192.168.2.4:8001/"),
img = document.getElementById('img');
//setup callbacks
ws.onopen = function()
{
console.log('Websocket Open');
};
ws.onclose = function()
{
console.log('Websocket Closed');
};
ws.onerror = function(event)
{
console.log('error');
};
ws.onmessage = function(message)
{
img.src=message.data;
};
and this is camera.js code
var videoId = 'video',
scaleFactor = 0.5,
snapshot = null,
upload_image,
video = document.getElementsByTagName('video')[0],
heading = document.getElementsByTagName('h1')[0];
var ws = new WebSocket("ws://192.168.2.4:8001/");
/**
* Captures a image frame from the provided video element.
*
* @param {Video} video HTML5 video element from where the image frame will be captured.
* @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
*
* @return {Canvas}
*/
function capture(video, scaleFactor) {
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}
/**
* Invokes the capture() function and attaches the canvas element to the DOM.
*/
function shoot(){
var output = document.getElementById('output');
var canvas = capture(video, scaleFactor);
canvas.onclick = function(){
window.open(this.toDataURL());
};
//load the photo when the new page opens
$('#photos').live('pageshow',function(){
$('#output').html(canvas);
upload_image = canvas.toDataURL();
});
//load the photos page
$.mobile.changePage('#photos');
}
/**
* Tests support for toDataURL required for linking to full size images
*
* @return {bool}
*/
function supportsToDataURL()
{
var c = document.createElement("canvas");
var data = c.toDataURL("image/png");
return (data.indexOf("data:image/png") == 0);
}
/**
* Tests support for getUserMedia... kind of the whole point of this
*
* @return {bool}
*/
function supportsGetUserMedia()
{
if(!navigator.getUserMedia)
{
heading.textContent =
"Native web camera streaming is not supported in this browser!";
return false
}
else
{
return true;
}
}
if(supportsGetUserMedia())
{
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream )
{
video.src = stream;
}
function errorCallback( error )
{
heading.textContent =
"An error occurred: [CODE " + error.code + "]";
}
}
if(!supportsToDataURL())
{
heading.textContent+="You browser is lame and does NOT support Canvas.toDataURL();"
}
/*******************************************************************************
*
* Websockets stuff
*
*******************************************************************************
*/
button = document.getElementById('button');
//setup websocket connection
//setup callbacks
ws.onopen = function()
{
console.log('Websocket Open');
};
ws.onclose = function()
{
console.log('Websocket Closed');
};
ws.onerror = function(event)
{
console.log('error');
};
ws.onmessage = function(event)
{
console.log('message');
};
//bind button to send picture
addEventListener('click', streamFrame, false);
/**
* Start grabbing frames and sending them via the websocket
*
* Called when the button is pressed, grabs a frame of video,
* renders it to the canvas, grabs the base64 encoded data and
* sends it through the websocket. The framerate can be adjusted
* by changing the interval time but I found this to be the fastest
* my phone could cope with
*
*/
function streamFrame()
{
var context = canvas.getContext("2d");
setInterval(function(){
context.drawImage(video, 0, 0, 480, 640);
var image = canvas.toDataURL("image/png");
console.log('send');
ws.send(image);
},800);
}