Forum

Blend4web and websockets

31 March 2018 23:30
Hello,

I want to develop an Blend4Web application that transmits data (object and hmd) continuously to a websocket server. Is it possible to use websockets into the .js main file of the b4w application ? Did someone already used websockets into a b4w app ?
02 April 2018 12:20
Hello! And welcome to our forum!

See this thread.
Alexander (Blend4Web Team)
twitter
02 April 2018 13:39
Yes !!! With Node.js, could be fine also… Thank you very much. However, since I want to have a network connection between a b4w app and a processing (http://processing.org) application, a simple websocket connection would be easier to add.
03 April 2018 15:54
So bad :
There is a "websocket" directory in the node_modules directory of the blend4web_ce distributed files. Is there a way to use this node module in the main .js file of the blend4web application ?
var socket = require ("websocket") ;

this does not work.
It is so bad not to have a websocket module or node.js module avalaible for blend4web…
03 April 2018 17:41
So, I tried to add to my application a node.js server (in fact a nodejs-websocket server) to my b4w application.
I tried to follow the framework of this example : https://github.com/WillWelker/node_chess (node chess)

So I add in the app's directory a app.js file to create the server… its ok.

However, I tried to create a client into my b4w main javascript file according to https://github.com/WillWelker/node_chess/blob/master/public/App_Nodejs.js .. but it did not work.

The file begin with
"use strict"

// register the application module
b4w.register("app_nodejs", function(exports, require) {

// import modules used by the app
var m_app    = require("app");
...
var m_util   = require("util");

var m_quat = require("quat");
....
var _socket = io();
etc...


but io() is unknown here…
04 April 2018 00:13
in your main index.html you need this
<script type="text/javascript" src="socket.io.js"></script>


then in your b4w code you can add this:
var socket = io('xxx.xxx.xxx.xxx:yyyy');

where xxx.xxx.xxx.xxx is the IP address or domain name of the server
yyyy is the port that the server is hosted on

attached socket.io.js

Then this code will work.. since the src= is in the html file it's available
socket.on('connect', function(){});
socket.on('event', function(data){});
socket.on('disconnect', function(){});
06 April 2018 00:20
Thank you very much : I tried …
I installed socket.io (npm install socket.io)
I linked socket.io (npm link socket.io)

I wrote a very simple app.js for node.js which is the following (link) :
var http = require('http');
var fs = require('fs');

// Chargement du fichier index.html affiché au client
var server = http.createServer(function(req, res) {
    fs.readFile('./CameraMotion.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });
});

// Chargement de socket.io
var io = require('socket.io').listen(server);

// Quand un client se connecte, on le note dans la console
io.sockets.on('connection', function (socket) {
    console.log('Un client est connecté !');
});
server.listen(2000);


This is the corresponding html file (CameraMotion.html)
<!DOCTYPE html>
<html>
<head>
<title>CameraMotion</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="CameraMotion.css" type="text/css">

<!--  socket.io client library -->
<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript" src="../../dist/b4w.js"></script>

<script type="text/javascript" src="CameraMotion.js"></script>

</head>

<body>
  <div id="main_canvas_container"></div>
</body>

</html>


I ran the node server -> node app.js
But when I tested the development version of my app (CameraMotion) I get the following error :
Échec du chargement pour l’élément <script> dont la source est « http://localhost:6687/socket.io/socket.io.js ».
ReferenceError: io is not defined

(traduction of the message in french : Failed to load the <script> item the source of which is ….)

the socket.io.js script seems to be unattainable for the html file.
I'm very near to success since my node server works well (I tested it with another client)….
06 April 2018 12:49
Ok step by step :

I tried the same using "npm init" and then "npm install socket.io –save".
This created a "node_modules" directory in my app directory with a copy of all the node modules including socket.io.
So I modified my html file with the following :
<script type="text/javascript" src="node_modules/socket.io-client/dist/socket.io.js"></script>

And Yes the "io is not defined" error disappeared.
But when I test the app, in the browser I had the following error
"Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:2000/socket.io/?EIO=3&transport=polling&t=MAQMaku. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant."
This error message (blocking of a multi-origin request) has something to do with the security and the fact that my server does not work in the same domain than my browser may be.

The "npm init" is a workaround to have socket.io working, but it is not very satisfying.
Instead one can locate the socket.io.js in the blend4web_ce directory :
<script type="text/javascript" src="../../node_modules/socket.io-client/dist/socket.io.js"></script>

Other workaround : to disable CORS policy, there is an extension for Firefox HERE.
However, still doesn't work completely, the workarounds for the socket.io.js does not work for the built version of the project.
Summary : I succeed in establishing a websocket connexion between the blend4web application and the node.js server. They are able to chat together. However, the workarounds (path to node_modules for socket.io.js and the Firefox addon to disable CORS policy) do not work for the built version of the blend4web application. Still have a ReferenceError: io is not defined
14 April 2018 07:40
Node has a cors module you can use with express.

in node,
npm i cors

cost cors = require 'cors'
app.use(cors());
 
Please register or log in to leave a reply.