How can i create own url like ws://echo.websocket.org? - javascript

I am new to computer science.I am learning nodejs. I see a lot of examples where developer uses url like this
ws://echo.websocket.org
ws://localhost:8080/echo
ws://sandbox.kaazing.net/echo
What does this mean? Why do we need this when we can make chat apps or maybe any real time app?
How can I create my own ?
I tried to create my own but I don't know what I have to write. I just write this code only
var ws=require('ws');
var http=require('http');
http.createServer(function(req, res){
// here i dont know what i write
}).listen(8080);
I tried to goole how can I create/build url like those... but I could not find any good tutorial.
..............................................
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>
I snippet this code from https://www.websocket.org/echo.html.

What you're referring to are Protocol Handlers.
ws is the websocket protocol (wikipedia). In order to create a custom protocol, a user would have to install an application on their client. In windows, these are saved in the registry. See ShotgunSoftware Article.
Defining a protocol on a server application created in NodeJS is not feasible. You will only be able to define it on the server at best.
I hope this cleared up any confusion, please let me know if I can provide clarification.

Related

WebRTC connects on local connection, but fails over internet

I have some test code running that I'm using to try to learn the basics of WebRTC. This test code works on a LAN, but not over the internet, even if I use a TURN server (one side shows a status "checking" and the other "failed"). I can see that there are ice candidates in the SDPs, so I don't need to send them explicitly (right?).
This writes a lot of debug info to the console, so I can tell my signalling server is working. I'm stuck - what do I need to do differently in my code to enable it to work over the internet?
BTW, I have run other WebRTC demo scripts between my test computers, and they do work (like opentokrtc.ocom)
<html>
<head>
<title>test</title>
<script type="text/javascript">
var curInvite = null;
//create an invitation to connect and post to signalling server
function CreateInvite(){
//function to run upon receiving a response
var postRespFunc = function(txt){
console.log("Posted offer and received " + txt);
var invite = txt;
curInvite = invite;
document.getElementById("inviteId").innerHTML = invite;
//then poll for answer...
var pollFunc = function(){
GetRequest("answered?"+invite,function(txt){
if(txt){
//assume it's the answer
handleAnswer(txt);
}else{
//poll more
setTimeout(pollFunc,1000);
}
});
};
//start polling for answer
setTimeout(pollFunc,1000);
};
//function to run after creating the WebRTC offer
var postFunc = function(offer){
PostRequest('offer','offer='+encodeURIComponent(offer), postRespFunc);
}
//create the offer
createLocalOffer(postFunc);
}
function AnswerInvite(){
var invite = document.getElementById("invitation").value;
//can we create our local description BEFORE we get the remote desc?
//reduce to one ajax call?
GetRequest("accept?"+invite,function(txt){
var answerPostedCallback = function(txt){
console.log("answerPostedCallback",txt);
}
var answerCallback = function(answer){
PostRequest("answer?"+invite,'answer='+encodeURIComponent(answer), answerPostedCallback);
}
handleOffer(txt, answerCallback);
//then we're waiting for a data channel to be open...
});
}
function PostRequest(postUrl, reqStr, callback){
var req=new XMLHttpRequest();
req.onload = function(){
var strResp = req.responseText;
if(callback) callback(strResp);
}
//var namevalue=encodeURIComponent(document.getElementById("test").value);
//var parameters="name="+namevalue;
req.open("POST", postUrl, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(reqStr);
}
function GetRequest(getUrl, callback){
var req=new XMLHttpRequest();
req.onload = function(){
var strResp = req.responseText;
if(callback) callback(strResp);
}
//var namevalue=encodeURIComponent(document.getElementById("test").value);
//var parameters="name="+namevalue;
req.open("GET", getUrl, true);
req.send();
}
/************ WebRTC stuff ****************/
var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||
window.webkitRTCPeerConnection || window.msRTCPeerConnection;
var RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
window.webkitRTCSessionDescription || window.msRTCSessionDescription;
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia;
//SEE http://olegh.ftp.sh/public-stun.txt
var cfg = {"iceServers":[
{url:'stun:stun.12connect.com:3478'},
{url:'stun:stun.12voip.com:3478'}
]};
cfg.iceServers = [{
url: 'turn:numb.viagenie.ca',
credential: 'muazkh',
username: 'webrtc#live.com'
}]
var con = { 'optional': [{'DtlsSrtpKeyAgreement': true}] };
var peerConnection = new RTCPeerConnection(cfg,con);
var dataChannel = null;
function initDataChannel(){
dataChannel.onerror = function (error) {
console.log("Data Channel Error:", error);
};
dataChannel.onmessage = function (event) {
console.log("Got Data Channel Message:", event.data);
var data = JSON.parse(event.data);
document.getElementById("chat").innerHTML+= "RECD: " + data + "<br />";
};
dataChannel.onopen = function () {
console.log('data channel open');
alert("data channel open, ready to connect!");
};
dataChannel.onclose = function () {
console.log("The Data Channel is Closed");
peerConnection.close();
alert("Disconnected!");
};
}
//used when peerConnection is an answerer
peerConnection.ondatachannel = function (e) {
dataChannel = e.channel || e; // Chrome sends event, FF sends raw channel
initDataChannel();
console.log("Received datachannel", arguments);
}
//to initiate a connection
function createLocalOffer(callback) {
//create datachannel
try {
dataChannel = peerConnection.createDataChannel('test', {reliable:true});
initDataChannel();
console.log("Created datachannel (peerConnection)");
} catch (e) { console.warn("No data channel (peerConnection)", e); }
//set event handler
peerConnection.onicecandidate = function (e) {
console.log("ICE candidate (peerConnection)", e);
if (e.candidate == null) {
console.log("ice candidate",peerConnection.localDescription);
callback(JSON.stringify(peerConnection.localDescription));
}
};
peerConnection.createOffer(function (desc) {
peerConnection.setLocalDescription(desc);
console.log("created local offer", desc);
}, function () {console.warn("Couldn't create offer");});
}
peerConnection.onconnection = function(e){
console.log("peerConnection connected",e);
};
function onsignalingstatechange(state) {
console.info('signaling state change:', state);
}
function oniceconnectionstatechange(state) {
console.info('ice connection state change:', state);
console.info('iceConnectionState: ', peerConnection.iceConnectionState);
}
function onicegatheringstatechange(state) {
console.info('ice gathering state change:', state);
}
peerConnection.onsignalingstatechange = onsignalingstatechange;
peerConnection.oniceconnectionstatechange = oniceconnectionstatechange;
peerConnection.onicegatheringstatechange = onicegatheringstatechange;
//local handles answer from remote
function handleAnswer(answerJson) {
var obj = JSON.parse(answerJson);
var answerDesc = new RTCSessionDescription(obj);
peerConnection.setRemoteDescription(answerDesc);
}
/* functions for remote side */
//handle offer from the initiator
function handleOffer(offerJson, callback) {
var obj = JSON.parse(offerJson);
var offerDesc = new RTCSessionDescription(obj);
peerConnection.setRemoteDescription(offerDesc);
//set event handler
peerConnection.onicecandidate = function (e) {
console.log("ICE candidate (peerConnection)", e);
if (e.candidate == null) {
console.log("ice candidate",peerConnection.localDescription);
}
};
peerConnection.createAnswer(function (answerDesc) {
console.log("Created local answer: ", answerDesc);
peerConnection.setLocalDescription(answerDesc);
callback(JSON.stringify(answerDesc));
}, function () { console.warn("No create answer"); });
}
function sendMessage() {
var msg = document.getElementById("msg").value;
document.getElementById("msg").value = null;
document.getElementById("chat").innerHTML+= "SENT: " + msg + "<br />";
var obj = {message: msg};
dataChannel.send(JSON.stringify(msg));
return false;
};
</script>
</script>
</head>
<body>
<p>test</p>
<p>
<div id="createWrapper">
<h4>create an invitiation</h4>
<button type="button" onclick="CreateInvite();">create invitation</button>
<h3 id="inviteId"></h3>
</div>
<div id="acceptWrapper">
<h4>or accept an inviation</h4>
<input id="invitation" type="text" name="invitation" />
<button type="button" onclick="AnswerInvite()">answer invitation</button>
</div>
<p>Once the data channel is open type your messages below</p>
<input type="text" id="msg" /><button type="button" onclick="sendMessage()">send</button>
<div id="chat"></div>
</body>
</html>
[EDIT: HERE IS WORKING CODE, IN CASE IT'S USEFUL TO ANYONE ELSE. You will still need your own signalling server and working STUN/TURN server(s), but this was helpful to me to understand the basics]
<html>
<head>
<title>test</title>
<script type="text/javascript">
var curInvite = null;
//create an invitation to connect and post to signalling server
function CreateInvite(){
//function to run upon receiving a response
var postRespFunc = function(txt){
console.log("Posted offer and received " + txt);
var invite = txt;
curInvite = invite;
document.getElementById("inviteId").innerHTML = invite;
//then poll for answer...
var pollFunc = function(){
GetRequest("answered?"+invite,function(txt){
if(txt){
//assume it's the answer
handleAnswer(txt);
}else{
//poll more
setTimeout(pollFunc,1000);
}
});
};
//start polling for answer
setTimeout(pollFunc,100);
};
//function to run after creating the WebRTC offer
var postFunc = function(offer){
PostRequest('offer','offer='+encodeURIComponent(offer), postRespFunc);
}
//create the offer
createLocalOffer(postFunc);
}
function AnswerInvite(){
var invite = document.getElementById("invitation").value;
//can we create our local description BEFORE we get the remote desc?
//reduce to one ajax call?
GetRequest("accept?"+invite,function(txt){
var answerPostedCallback = function(txt){
console.log("answerPostedCallback",txt);
}
var answerCallback = function(answer){
PostRequest("answer?"+invite,'answer='+encodeURIComponent(answer), answerPostedCallback);
}
handleOffer(txt, answerCallback);
//then we're waiting for a data channel to be open...
});
}
function PostRequest(postUrl, reqStr, callback){
var req=new XMLHttpRequest();
req.onload = function(){
var strResp = req.responseText;
if(callback) callback(strResp);
}
//var namevalue=encodeURIComponent(document.getElementById("test").value);
//var parameters="name="+namevalue;
req.open("POST", postUrl, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(reqStr);
}
function GetRequest(getUrl, callback){
var req=new XMLHttpRequest();
req.onload = function(){
var strResp = req.responseText;
if(callback) callback(strResp);
}
//var namevalue=encodeURIComponent(document.getElementById("test").value);
//var parameters="name="+namevalue;
req.open("GET", getUrl, true);
req.send();
}
/************ WebRTC stuff ****************/
var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||
window.webkitRTCPeerConnection || window.msRTCPeerConnection;
var RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
window.webkitRTCSessionDescription || window.msRTCSessionDescription;
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia;
//SEE http://olegh.ftp.sh/public-stun.txt
var cfg = {"iceServers":[
{url: 'turn:numb.viagenie.ca',
credential: 'muazkh',
username: 'webrtc#live.com'
}
]};
var con = { 'optional': [{'DtlsSrtpKeyAgreement': true}] };
var peerConnection = null;
function createPeer(){
peerConnection = new RTCPeerConnection(cfg,con);
//used when peerConnection is an answerer
peerConnection.ondatachannel = function (e) {
dataChannel = e.channel || e; // Chrome sends event, FF sends raw channel
initDataChannel();
console.log("Received datachannel", arguments);
}
peerConnection.onsignalingstatechange = onsignalingstatechange;
peerConnection.oniceconnectionstatechange = oniceconnectionstatechange;
peerConnection.onicegatheringstatechange = onicegatheringstatechange;
peerConnection.onconnection = function(e){
console.log("peerConnection connected",e);
};
}
var dataChannel = null;
function initDataChannel(){
dataChannel.onerror = function (error) {
console.log("Data Channel Error:", error);
};
dataChannel.onmessage = function (event) {
console.log("Got Data Channel Message:", event.data);
var data = JSON.parse(event.data);
document.getElementById("chat").innerHTML+= "RECD: " + data + "<br />";
};
dataChannel.onopen = function () {
console.log('data channel open');
alert("data channel open, ready to connect!");
};
dataChannel.onclose = function () {
console.log("The Data Channel is Closed");
peerConnection.close();
alert("Disconnected!");
};
}
//to initiate a connection
function createLocalOffer(callback) {
createPeer();
//create datachannel
try {
dataChannel = peerConnection.createDataChannel('test', {reliable:true});
initDataChannel();
console.log("Created datachannel (peerConnection)");
} catch (e) { console.warn("No data channel (peerConnection)", e); }
//set event handler
peerConnection.onicecandidate = function (e) {
console.log("ICE candidate (peerConnection)", e);
if (e.candidate == null) {
console.log("ice candidate",peerConnection.localDescription);
callback(JSON.stringify(peerConnection.localDescription));
}
};
peerConnection.createOffer(function (desc) {
peerConnection.setLocalDescription(desc);
console.log("created local offer", desc);
}, function () {console.warn("Couldn't create offer");});
}
function onsignalingstatechange(state) {
console.info('signaling state change:', state);
}
function oniceconnectionstatechange(state) {
console.info('ice connection state change:', state);
console.info('iceConnectionState: ', peerConnection.iceConnectionState);
}
function onicegatheringstatechange(state) {
console.info('ice gathering state change:', state);
}
//local handles answer from remote
function handleAnswer(answerJson) {
var obj = JSON.parse(answerJson);
var answerDesc = new RTCSessionDescription(obj);
peerConnection.setRemoteDescription(answerDesc);
}
/* functions for remote side */
//handle offer from the initiator
function handleOffer(offerJson, callback) {
createPeer();
var obj = JSON.parse(offerJson);
var offerDesc = new RTCSessionDescription(obj);
//set event handler
peerConnection.onicecandidate = function (e) {
console.log("ICE candidate (peerConnection)", e);
if (e.candidate == null) {
console.log("ice candidate",peerConnection.localDescription);
callback(JSON.stringify(peerConnection.localDescription));
}
};
peerConnection.setRemoteDescription(offerDesc);
peerConnection.createAnswer(function (answerDesc) {
console.log("Created local answer: ", answerDesc);
peerConnection.setLocalDescription(answerDesc);
}, function () { console.warn("No create answer"); });
}
function sendMessage() {
var msg = document.getElementById("msg").value;
document.getElementById("msg").value = null;
document.getElementById("chat").innerHTML+= "SENT: " + msg + "<br />";
var obj = {message: msg};
dataChannel.send(JSON.stringify(msg));
return false;
};
</script>
</script>
</head>
<body>
<p>test</p>
<p>
<div id="createWrapper">
<h4>create an invitiation</h4>
<button type="button" onclick="CreateInvite();">create invitation</button>
<h3 id="inviteId"></h3>
</div>
<div id="acceptWrapper">
<h4>or accept an inviation</h4>
<input id="invitation" type="text" name="invitation" />
<button type="button" onclick="AnswerInvite()">answer invitation</button>
</div>
<p>Once the data channel is open type your messages below</p>
<input type="text" id="msg" /><button type="button" onclick="sendMessage()">send</button>
<div id="chat"></div>
</body>
</html>
The SDP will only contain the candidates that have been gathered up to that point in time, so unless you wait for the null candidate in the pc.onicecandidate callback, you wont get all candidates this way (you seem to be waiting in your createLocalOffer, but not in your handleOffer, I think is the problem here).
That said, I don't recommend this approach since it can take up to 20 seconds for the ICE agent to exhaust all paths (happens a lot on systems with VPN for instance). Instead, I highly recommend sending candidates explicitly to the other side. i.e. Trickle ICE.
If you don't see any candidate like relay or server-reflexive then you can try first to capture a tcpdump using wireshark or so to see if there is any outgoing packet to your STUN/TURN server, if no outgoing packet by filtering as STUN then your configuration may not working. If you see out going STUN/TURN traffic then whatever the error is you might get some response from server which may have authentication error or some other error but based on the response type you can determine the issue with STUN/TRUN. If you see success response from STUN/TURN then you can see if you are including the candidates correctly in SDP or your signalling offer/answer message to advertise the candidates to other end.

How to save incoming textfile from client from websocket connection

I'm trying to implement a websocket server in node.js without using any framework.
Sending messages from client to server is working fine. But now I tried to send a text file from client to server. I can see the content on the server side by using console.log in the terminal.
But:
how can i get the file information ? (name, created/edited date, etc. ?)
how can i save the file ?
Client code:
(function () {
'use strict';
var output, ws;
//Display logging information in the document
function log(s) {
var p = document.createElement("p");
p.style.wordWrap = "break-word";
p.textContent = s;
output.appendChild(p);
//Also log information on the javascript console
window.console.log(s);
}
//Send a message on the Websocket
function sendMessage(msg) {
console.log(ws.binaryType);
ws.send(msg);
console.log("Message sent");
}
//Initialize WebSocket connection and event handlers
function setup() {
output = document.getElementById("output");
ws = new window.WebSocket("ws://localhost:9999/");
//Listen for the connection open event then call the sendMessage function
ws.onopen = function () {
console.log("Connected");
document.getElementById('fl').onchange = function() {
sendMessage(document.querySelector('input[type="file"]').files[0]);
};
sendMessage("Hello Galileo!");
}
//Listen for the close connection event
ws.onclose = function (e) {
if(this.readyState == 2){
console.log('Connection is closing (Closing Handshake).')
}
else if(this.readyState == 3){
console.log('Connection closed. Has been closed or could not be opened.')
}
else{
console.log('Unhandled ReadyState: ',this.readyState);
}
console.log("Disconnected: " +
' reason:' + e.reason +
' was clean:' + e.wasClean +
' code:' + e.code);
}
//Listen for connection errors
ws.onerror = function (e) {
console.log("Error: " + e);
}
//Listen for new messages arriving at the client
ws.onmessage = function (e) {
console.log("Message received: " + e.data);
//Close the socket once one message has arrived
ws.close();
}
}
//Start running the example
setup();
})();
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Websocket Echo Client</title>
<meta charset="utf-8"/>
</head>
<body>
<h2>Websocket Echo Client</h2>
<div id="output"></div>
<input type="file" id="fl"/>
<script src="websocket.js"></script>
</body>
</html>
Server code
switch (opcode) {
case opcodes.TEXT:
this.payload = payload.toString("utf8");
winston.log('info','Text:\r\n', this.payload);
break;
case opcodes.BINARY:
console.log('info','File:\r\n', payload.toString("utf8"));
As far as I know the payload you're receiving on the server side does not contain the meta data about the file. I believe the File object is treated as a normal Blob with some extra meta data and the ws.send is only handling it like a Blob (it has no special handling for File).
The meta data can be accessed using
document.querySelector('input[type="file"]').files[0].name
document.querySelector('input[type="file"]').files[0].size
document.querySelector('input[type="file"]').files[0].type
And then send separately.

websocket server not receiving message

First I built a websocket server using node js and ws module. Then using chrome and firefox, I connect to that server and the connection is successfully established. However, the message I send from browsers does not arrive at the server. I have some code on server to console.log out if message is received. Nothing appears, however when I refresh the browser, the messages I previously sent arrive. The messages did not arrive when sent them but only once I refresh the page. I don't know why. This seems to work in from some other computers but not mine.
Here is the server code:
var WebSocketServer = require('ws').Server
, http = require('http')
, express = require('express')
, app = express();
app.use(express.static(__dirname + '/views'));
var rmi = require('./RMIClient.js');
console.log(rmi);
var server = http.createServer(app);
server.listen(8080);
var wss = new WebSocketServer({server: server});
// from here is the logic codes
var clients = [];
var clientId = 0;
wss.on('connection', function(ws) {
console.log("connection established for client "+ (clients.length+1));
clients.push(ws);
console.log("index is " + clients.indexOf(ws));
clientId += 1;
ws.send("Hello Client: " + clientId);
//
// ws.send("Welcome from AMTT Chatting Server");
ws.on('message',function(data){
console.log('message receieved : '+data);
for(var i = 0;i<clients.length;i++){
clients[i].send(data);
}
});
ws.on('a',function(){
console.log("a event fire from client");
});
ws.on('close', function() {
var index = clients.indexOf(ws);
console.log('stopping client interval '+index);
if (index > -1) {
clients.splice(index, 1);
}
});
});
Here is the client code:
<html>
<script>
//var ws = new WebSocket('ws://localhost:8080/');
var messagearea,inputarea,sendButton;
var connection = new WebSocket(/*'wss://echo.websocket.org');*/'ws://192.168.8.195:8080/');
// When the connection is open, send some data to the server
console.log(connection.readyState);
connection.onopen = function () {
console.log(connection.readyState);
inputarea.disabled = false;
sendButton.disabled = false;
};
// Log errors
connection.onerror = function (error) {
console.log('sorry connection fail:' + JSON.stringify(error));
};
// Log messages from the server
connection.onmessage = function (e) {
messagearea.value = messagearea.value + '\n' + e.data;
console.log('Server: ' + e.data);
};
function sendMessage(){
if(inputarea.value !='')
connection.send(inputarea.value);
inputarea.value = '';
}
</script>
<body>
<textarea rows="15" cols="100" id="messagearea" disabled>
</textarea>
<br/>
<textarea rows="2" cols="90" id="inputarea" required autofocus>
</textarea>
<input type = 'button' value = 'send' id = 'sendbutton' onclick = "sendMessage()"/>
</body>
<script>
messagearea = document.getElementById('messagearea');
messagearea.value = '';
inputarea = document.getElementById('inputarea');
inputarea.value = '';
inputarea.disabled = true;
sendButton = document.getElementById('sendbutton');
sendButton.disabled = true;
</script>
</html>
And again I found that kind of situation when I develop that code in java and deployed in wildfly server. I am lost. I think there is something concerned with my network card. Because that same code work perfectly in my friend's machine.
Does anybody experience this situation ? or any solution?
You can also try the following:
connection.addEventListener("message", function (e) {
processSocketMessage(e);
});
good luck :)

Setting up websockets server

this is my first time using websockets and I am having trouble getting my server to work. Below is the simple em-websocket server I copied from this github page. It's basically unchanged right now so it looks like so:
require 'em-websocket'
EM.run {
EM::WebSocket.run(:host => "0.0.0.0", :port => 8080) do |ws|
ws.onopen { |handshake|
puts "WebSocket connection open"
# Access properties on the EM::WebSocket::Handshake object, e.g.
# path, query_string, origin, headers
# Publish message to the client
ws.send "Hello Client, you connected to #{handshake.path}"
}
ws.onclose { puts "Connection closed" }
ws.onmessage { |msg|
puts "Recieved message: #{msg}"
ws.send("Pong: #{msg}")
}
end
}
I then copied the html from this simple echo test, just changing the url from ws://echo.websocket.org to ws://localhost:3000/websocket.rb (the .rb file is located in the app directory of my Rails project).
When I run the test from that page, I get the following results:
CONNECTED
SENT: WebSocket rocks
RESPONSE: [["client_connected",{"id":null,"channel":null,"data":{"connection_id":70297110490160},"success":null,"result":null,"server_token":null}]]
DISCONNECTED
Since the data in this test is hard-coded, I had expected the SENT and RESPONSE messages to be the same. However, I get the confusing message that begins with client_connected but contains nothing but null data.
Can anyone tell me what is going on? Am I connecting to my "server" (the websockets.rb file) and if so do I simply need to make some adjustments in the code, such as create a reply method? Again, this is my first time attempting to use this technology so I apologize if I'm missing anything in this post.
For good measure, here is the code that is running in the echo test.
<script language="javascript" type="text/javascript">
var wsUri = "ws://localhost:3000/websocket.rb";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt) };
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>
</html>

why Websocket onmessage not firing

this my code from books "The Definitive Guide to HTML5 websocket".
....
<div id="output"></div>
<script>
function setup() {
output = document.getElementById("output");
ws = new WebSocket("ws://localhost:7777");
ws.onopen = function(e) {
log("Connected");
sendMessage("Hello Websocket!");
}
ws.onclose = function(e){
log("Disconnected: " + e.reason);
}
ws.onerror = function(e){
log("Error ");
}
ws.onmessage = function(e) {
log("Message received: " + e.data);
ws.close();
}
}
function sendMessage(msg){
ws.send(msg);
log("Message Sent");
}
function log(s){
var p = document.createElement("p");
p.style.wordWrap = "break-word";
p.textContent = s;
output.appendChild(p);
console.log(s);
}
setup();
</script>
but, when i'm running it in localhost.. the output just like this
Connected
Message Sent
and stop until that. i knew event onmessage is not firing, but i dont know why. what could possibly be the problem? thanks
onmessage will only fire when the server sends a message to the client, not when the client is sending a message to the server (which is what you're doing).
If your server is sending back a message and that isn't being picked up by your client, you're going to need to provide a bit more context (server implementation, etc).

Categories

Resources