Websocket Support in 2.0

lamtran · Post by **lamtran** » 04 Dec 2014 20:37

I have the same question as digitaldan: "How would clients make a websocket connection, what URL would they need to request?"

I have a web-app and I know how to use Websocket. Just need the connect URL or examples of it somewhere.

hecashit · Post by **hecashit** » 15 Dec 2014 15:34

Waiting for the examples too...

wbeke · Post by **wbeke** » 23 Dec 2014 13:41

Anything on this?
Client side on HTML is easy, but I need to know the details of the server side.
Is there documentation available? Is this done via a userModules? if so do you have an example?

martinisonline · Post by **martinisonline** » 03 Jan 2015 03:21

I'm curious on this topic also...

Any news?

<<Edit>>
Wrote a simple html page to perform some tests. It actually connects to the z-way server.
It also sends the message to the server.
Now im stucked. How do i send messages back to the browser? Where should i put the "ws.push(obj);"

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://192.168.1.190:8083");
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        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()
     { 
        // websocket is closed.
        alert("Connection is closed..."); 
     };
  }
  else
  {
     // The browser doesn't support WebSocket
     alert("WebSocket NOT supported by your Browser!");
  }
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

Post by **pofs** » 04 Jan 2015 01:32

Okay, we now have WS API stabilized, so I prepared some reference code for you.

Client-side JS:

Code: Select all

<script type="text/javascript">
    var websocket = new WebSocket('ws://' + location.host);
    websocket.onopen = function(ev) {
        console.log("connected");
        // this makes client to receive only relevant events:
        websocket.send("my.custom.event");
    };
    websocket.onclose = function(ev) {
        console.log("disconnected");
    };
    websocket.onmessage = function(ev) {
        if (!ev.data) {
            console.log("ping");
        } else {
            console.log(ev.data);
        }
    };
    websocket.onerror = function(ev) {
        console.log("error: " + ev.data);
    };
</script>

Server-side JS:

Code: Select all

var obj = { ... };
ws.push("my.custom.event", obj);

martinisonline · Post by **martinisonline** » 04 Jan 2015 02:07

Thanks pofs.

Your code works, with a minor adjustment:

Code: Select all

var websocket = new WebSocket('ws://' + location.host + ':8083');

Without the reference to the port number, it doesn't work!

br,

Post by **pofs** » 04 Jan 2015 02:14

It should work as is, because location.host returns the hostname AND port of a URL (http://www.w3schools.com/jsref/prop_loc_host.asp).
What browser are you using? It might be an issue with it.

martinisonline · Post by **martinisonline** » 04 Jan 2015 02:26

Your reference is correct!!

After some debug, i understand why i should add the port number...
I'm running a 'parallel' webserver that provides webpages from raspberry, apart from zway server. The test page, is there.

Since its running on port 80, it doesn't show the port number. If served by zway server, your code should work without problems i believe.

thanks

hecashit · Post by **hecashit** » 04 Jan 2015 09:58

pofs wrote:Okay, we now have WS API stabilized, so I prepared some reference code for you.

Client-side JS:

Code: Select all

<script type="text/javascript">
    var websocket = new WebSocket('ws://' + location.host);
    websocket.onopen = function(ev) {
        console.log("connected");
        // this makes client to receive only relevant events:
        websocket.send("my.custom.event");
    };
    websocket.onclose = function(ev) {
        console.log("disconnected");
    };
    websocket.onmessage = function(ev) {
        if (!ev.data) {
            console.log("ping");
        } else {
            console.log(ev.data);
        }
    };
    websocket.onerror = function(ev) {
        console.log("error: " + ev.data);
    };
</script>

Server-side JS:

Code: Select all

var obj = { ... };
ws.push("my.custom.event", obj);

Don't work for me in custom JS user files inside Automation folder.
Client-side code write that connections is ok but no messages sent from server.

2.0.1-rc7

Post by **pofs** » 04 Jan 2015 11:58

hecashit wrote:Don't work for me in custom JS user files inside Automation folder.

Maybe you should explain more details regarding what and where exactly you wrote.
Your file may be not executed at all, or it is just executed once on startup (when there's no clients connected yet), or hundred of other possible scenarios.

forum

Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0

Re: Websocket Support in 2.0