Im trying to get a connection between a JavaScript WebSocket and a TCP Server/Client applicat written in VisualBasic .Net . My problem is that the handshake fails. I do get a handshake request from the local website, but it does not accept my response.
The code of the JavaScript file:
<script type="text/javascript">
var ws;
function connect() {
if("WebSocket" in window) {
debugger;
ws = new WebSocket("ws://192.168.193.178:1925");
ws.onopen = function() {
alert("Connection established");
};
ws.onmessage = function(evt) {
var received_msg = evt.data;
alert("Message is received: " + received_msg);
};
ws.onerror = function(evt) {
alert("Error");
var received_msg = evt.data;
alert("Error: " + received_msg);
};
ws.onclose = function() {
// websocket is closed.
alert("Connection closed");
};
//ws.send("Test");
//ws.close();
} else {
alert("WebSocket NOT supported by your Browser!");
}
}
function disconnect() {
ws.close();
}
function send(message) {
ws.send(message);
alert("Sent: " + message);
}
</script>
The VB.Net code output:
Received:
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 192.168.193.178:1925
Origin: http://127.0.0.1:8020
Sec-WebSocket-Key: eGzO0afUD5jCeUdzdoxwjw==
Sec-WebSocket-Version: 13
Sent:
HTTP/1.1 101 Web Socket Protocol Handshake\r\n
Upgrade: WebSocket\r\n
Connection: Upgrade\r\n
Sec-WebSocket-Origin: null\r\n
Sec-WebSocket-Accept: NzU3M2IwYzk0ZWFmYjg4MzMyZWI1ODhhZWI4NWUyZDE1YWU2YzhlNA==\r\n
\r\n
I just cant get the WebSocket to accept the handshake, I hope anyone can help me out.
Maybe the hash-generation contains errors?
Edit:
I now get the correct Sec-WebSocket-Accept String (dXOwyU6vuIMy61iK64Xi0VrmyOQ=), anyway the WebSocket seems not to handle the handshake response. I tried debugging it with the Chrome Developer Tools, but I don't get usefull information from it. Any tips?
One thing sticks out immediately. The Sec-WebSocket-Accept value in the server response is much longer than what a correct value looks like. In fact, the correct value for that Key should be "dXOwyU6vuIMy61iK64Xi0VrmyOQ=". My guess is you're doing the base-64 encoding on the string representation of the SHA1 result. The encoding should be done on the byte representation of SHA1 result.
Related
I'm trying to receive json data from an ESP32 via TCP to a website hosted thru WAMP (localhost -> ESP32 IP address on local network is 10.11.125:23). Below is my javascript function. My browser (Firefox Developer) generates a "SecurityError: The operation is insecure" when executing the line var connection = new webSocket('ws://10.11.13.125:23'). What am I missing??
function openWebsocket() {
console.log("open Websocket.....");
var connection = new WebSocket('ws://10.11.13.125:23');
connection.onerror = function(error) {
$("#Connection").html("Connection Error");
console.log("Websocket Error: " + error);
}
connection.onopen = function(evt) {
$("#Connection").html("Connected");
}
connection.binaryType = 'arraybuffer';
connection.onmessage = function(evt) {
console.log("Server: " + evt.data.byteLength);
}
console.log("ReadyState: "+connection.readyState);
}
I found the problem. The Chromium browser yields a more descriptive error message. Port 23 is not available. Switched over to
var connection = new WebSocket('ws://10.11.13.125:80');
and voila, everything works as expected.
Sorry for posting about an issue that in the end I found the solution for myself.
I have created a PHP websocket server script as following.
$socket = socket_create(AF_INET, SOCK_STREAM, 0);
$result = socket_bind($socket, '127.0.0.1', 5001);
while (true) {
$result = socket_listen($socket);
$client = socket_accept($socket);
$input = socket_read($client, 1024);
$output = 'Input Received: '.$input;
socket_write($client, $output, strlen($output));
socket_close($client);
}
socket_close($socket);
I've executed file containing above code in terminal using following command
$ php server.php
Now I want to get the response on my front-end using JavaScript. I've used following JS snippet but not working.
var ws = new WebSocket("ws://localhost:5001/echo");
ws.onopen = function() {
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {
alert("Connection is closed...");
};
Receiving following error:
WebSocket connection to 'ws://localhost:5001/echo' failed: Error during WebSocket handshake: net::ERR_INVALID_HTTP_RESPONSE
Writing a PHP websocket server requires to perform a certain handshake with the client connecting to you via ws:// . In addition you need to decode and encode messages going in and out. The real fun starts when the clients contact you via wss://, then you have to take care of certificate and key within your PHP server and use stream-io instead of socket-io and so on and on. You can have a look at my implementation of all this and use it as another starting point .
https://github.com/napengam/phpWebSocketServer
I have a websocket client-server application. Here's client's simplified code:
const HOST = "wss://localhost:8000";
const SUB_PROTOCOL= "sub-protocol";
var websocket = new WebSocket(HOST, SUB_PROTOCOL);
websocket.onopen = function(evt) { ... };
websocket.onclose = function(evt) { ... };
websocket.onerror = function(evt) { ... };
websocket.onmessage = function(evt) { ... };
And here's server:
const PORT = 8000;
const SUBPROTOCOL = 'sub-protocol';
var WebSocketServer = require('websocket').server;
var https = require('https');
var fs = require('fs');
// Private key and certification (self-signed for now)
var options = {
key: fs.readFileSync('cert/server.key'),
cert: fs.readFileSync('cert/server.crt')
};
var server = https.createServer(options, function(request, response) {
console.log((new Date()) + ' Received HTTP(S) request for ' + request.url);
response.writeHead(404);
response.end();
});
// bind server object to listen to PORT number
server.listen(PORT, function() {
console.log((new Date()) + ' Server is listening on port ' + PORT);
});
wsServer = new WebSocketServer({
httpServer: server,
// You should not use autoAcceptConnections for production
// applications, as it defeats all standard cross-origin protection
// facilities built into the protocol and the browser. You should
// *always* verify the connection's origin and decide whether or not
// to accept it.
autoAcceptConnections: false
});
function originIsAllowed(origin) {
// put logic here to detect whether the specified origin is allowed.
return true;
}
// If autoAcceptConnections is set to false, a request event will be emitted
// by the server whenever a new WebSocket request is made
wsServer.on('request', function(request) {
if (!originIsAllowed(request.origin)) {
// Make sure we only accept requests from an allowed origin
request.reject();
console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
return;
}
// accepts connection and return socket for this connection
var connection = request.accept(SUB_PROTOCOL, request.origin);
console.log((new Date()) + ' Connection accepted.');
// when message is received
connection.on('message', function(message) {
// echo
connection.send(connection, message.utf8Data);
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
});
});
Both client and server works as expected even with some HTTPS pages (tested on Twitter, mail.ru,). But for some reason doesn't for example with Facebook or GitHub.
In JavaScript console I get this:
Exception { message: "", result: 2153644038, name: "", filename: "", lineNumber: 0, columnNumber: 0, inner: null, data: null }
Then huge stack trace follows: pasted it here
and at the end:
Content Security Policy: The page's settings blocked the loading of a resource at wss://localhost:8000/ ("connect-src https://github.com:443 https://ghconduit.com:25035 https://live.github.com:443 https://uploads.github.com:443 https://s3.amazonaws.com:443").
I don't see how does these page differ from pages, which works. I'd also like to point out, that these pages works in Chrome.
(tested in Firefox 31)
The pages where the WebSocket connection fails have a Content-Security-Policy header with the connect-src directive set to only allow connections to a set of whitelisted domains. This means that all connections from that page to any non-whitelisted domain will fail.
Its not clear how you're running this code. It seems possible that Chrome allows extensions to bypass that header restriction while Firefox does not, or something to that effect.
I've written a short WebSocket example server in PHP yesterday. When the client connects to the server, the server reads the client Handshake and sends the server Handshake back with the appropriate key. onopen() of the client gets fired and the server and client seem to be connected.
My problem is: The server can't receive client messages and the client can't receive server messages. onmessage() wasn't triggered once and socket_select() never gives back the client that sent the message on server side.
function connect() {
try {
var webSocketURL = "ws://" + serverAddress + ":" + serverPort;
socket = new WebSocket(webSocketURL);
socket.onopen = function() {
log("Connected! (" + this.readyState + ")");
}
socket.onclose = function() {
log("Closed! (" + this.readyState + ")");
socket.close();
}
socket.onerror = function(error) {
log("Error: " + error.data);
socket.close();
}
socket.onmessage = function(message) {
log("Message from server: " + message.data);
}
}
catch (e) {
alert("Error: " + e);
}
}
The server code is a bit longer, but you can find it here.
Can anyone tell me what's wrong there? Is the handshake incorrect?
Client output:
Connected! (1)
Message to server: 0USERchannel
Server output.
Help is much appreciated, thank you.
On client side, enshure your socket variable is global.
I have a node js server, and a html/javascript client.
I simply want to allow the client to send a json-string to the node.js server, the server process's that string and returns a result string back to the client.
I started by setting up the html-client to call like so :
var msg =
{
type: "message",
text: "Hello"
};
function CallWebSocket()
{
var socket = new WebSocket("ws://127.0.0.1:8080","test");
socket.onopen = function (event)
{
alert(JSON.stringify(msg));
socket.send(JSON.stringify(msg));
};
socket.onmessage = function(event)
{
alert(event.data);
}
}
and node.js :
var net = require('net');
var server = net.createServer(function(socket)
{
// do what you need
socket.setEncoding("utf8");
socket.on('data', function(data)
{
var jsonData = JSON.parse(data);
socket.write(jsonData.text);
socket.end();
process.exit(0);
});
});
server.listen(8080);
but on the server I get this error :
undefined:1
``GET / HTTP/1.1
^
SyntaxError: Unexpected token G
at Object.parse (native)
at Socket.<anonymous> (/home/jay/projects/nodejs/test/json-server.js:8:23)
at Socket.EventEmitter.emit (events.js:95:17)
at Socket.<anonymous> (_stream_readable.js:746:14)
at Socket.EventEmitter.emit (events.js:92:17)
at emitReadable_ (_stream_readable.js:408:10)
at emitReadable (_stream_readable.js:404:5)
at readableAddChunk (_stream_readable.js:165:9)
at Socket.Readable.push (_stream_readable.js:127:10)
at TCP.onread (net.js:526:21)
Any help is much appreciated.
UPDATE
The updated server code :
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer(function(request, response) {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log((new Date()) + ' Server is listening on port 8080');
});
wsServer = new WebSocketServer({
httpServer: server,
// You should not use autoAcceptConnections for production
// applications, as it defeats all standard cross-origin protection
// facilities built into the protocol and the browser. You should
// *always* verify the connection's origin and decide whether or not
// to accept it.
autoAcceptConnections: false
});
function originIsAllowed(origin) {
// put logic here to detect whether the specified origin is allowed.
return true;
}
wsServer.on('request', function(request) {
if (!originIsAllowed(request.origin)) {
// Make sure we only accept requests from an allowed origin
request.reject();
console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
return;
}
var connection = request.accept('echo-protocol', request.origin);
console.log((new Date()) + ' Connection accepted.');
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
connection.sendUTF(message.utf8Data);
}
else if (message.type === 'binary') {
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
connection.sendBytes(message.binaryData);
}
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
});
});
This solved my problem and I am now getting the message back.
A websocket is not a plain TCP socket. That is basically the core of your problem.
The websocket protocol looks like a modified HTTP protocol that allows two way communication using a single (TCP) socket. Read the RFC for more info on how the websocket protocol actually works: https://www.rfc-editor.org/rfc/rfc6455#section-1.2
You have two options if you want to use websockets with node servers:
Read the RFC and write a function to handle the websocket protocol so you can pass that function to socket.on.
Use a websocket server module that someone else have written. Go to npm and search for "websocket server" or google "websocket server npm". There are lots of modules out there. Pick one you like best.
There is a third alternative. Use socket.io. Socket.io is a library that communicates between client and server using websocket if possible (preferred) but is able to degrade to other transports such as Flash and ajax on older browsers.