[ExpressJS/SocketIO/NodeJS] Images serveren aan de client

[Pizza_Boom]

Voor de mensen die interesseert waar ik ongeveer mee bezig ben, een van mijn voorgaande topics.

Ik ben inmiddels dus zo ver dat mijn eigen pagina draait op mijn zelf geschreven nodeJS server en ik terugmelding krijg op mijn server. Alleen, omdat ik dus alles opstart via NodeJS en dit ook de hosting regelt middels een Javascript pagina die de desbetreffende HTML weer op roept en toont over een socket, moet ik ook mijn plaatjes via die socket moeten serven.

Ik had wat gegoogled en vrij veel antwoorden zijn dat je gebruik moet maken van de al reeds in ExpressJS geïntegreerde servestatic functie om een map open te stellen. Vervolgens zou uit deze map het plaatje probleemloos gebruikt kunnen worden door de Cliënt. Toch lukt dit niet en blijft mijn cliënt maar melden dat zijn GET niet lukt.

Die servestatic zou je als volgt moeten schrijven:

JavaScript:

express().use(express.static('/imagemap');

Ik had verwacht dat ik dan met deze code het plaatje kon benaderen:

HTML:

<img src="imagemap/image1.png" height="125" width="110" />

Dat werkt zoals gezegd niet, dan krijg ik deze error:
Cannot GET /imagemap/image1.png
Het benaderde ip adress is gewoon 192.168.0.1:3000/imagemap/image1.png. Dat ip adres is waarop de RPI nu als host zit en poort 3000 is de port waarop de index.html geserved wordt.

De HTML wordt op een andere manier gepresenteerd:

JavaScript:

    app.get('/', function(req, res) {
        // Serve this content to caller when webpage is loaded
        res.sendFile(__dirname + '/index.html');
    });

Dus dacht ik, als ik dit nou doe met mijn plaatje, wellicht werkt het.

JavaScript:

    app.get('/imagemap', function(req, res) {
        // Serve this content to caller when webpage is loaded
        res.sendFile(__dirname + '/image1.png');
    });

Helaas werkt dit ook niet. Het plaatje blijft een broken image en als ik het plaatje naar een los tabblad sleep, krijg ik weer "cannot GET".

Ik vraag mij nou af of ik niets naar mijn cliëntside verstuur, of dat ik de verkeerde locatie benader vanaf de cliënt.

Alvast dank voor de hulp

[Merethil]

Staat je image wel in dezelfde directory als je html? Want je tweede voorbeeld probeert uit diezelfde directory je image te laden.

Daarnaast: Heb je niet ergens een rule die voorkomt dat je alles behalve *.html-files mag serveren oid?

[ Voor 29% gewijzigd door Merethil op 19-02-2016 15:12 ]

[gekkie]

Om te debuggen misschien eens een curl of wget naar dat adres doen ?
En dan is de vraag krijg je een error en welke of krijg je data en is dat puur PNG data of is het iets anders of zit er nog wat omheen gewrapped etc ?

[RobIII]

gekkie schreef op vrijdag 19 februari 2016 @ 15:13:
Om te debuggen misschien eens een curl of wget naar dat adres doen ?

Dat kun je toch ook prima zien in je Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly

[Pizza_Boom]

Merethil schreef op vrijdag 19 februari 2016 @ 15:09:
Staat je image wel in dezelfde directory als je html? Want je tweede voorbeeld probeert uit diezelfde directory je image te laden.

Daarnaast: Heb je niet ergens een rule die voorkomt dat je alles behalve *.html-files mag serveren oid?

Die html index en js index staan in socketgpio. De images staan in socketgpio/imagemap. Hun link zou dan ook zijn: socketgpio/imagemap/image1.png

Dit is het index.js file

gekkie schreef op vrijdag 19 februari 2016 @ 15:13:
Om te debuggen misschien eens een curl of wget naar dat adres doen ?
En dan is de vraag krijg je een error en welke of krijg je data en is dat puur PNG data of is het iets anders of zit er nog wat omheen gewrapped etc ?

RobIII schreef op vrijdag 19 februari 2016 @ 15:15:
[...]

Dat kun je toch ook prima zien in je Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly

In de console monitor (F12) zie ik geen errors komen. De terminal van de host (die RPi) geeft ook geen errors. De pagina wordt ook gewoon geserveerd, alleen met broken images.

[Merethil]

Pizza_Boom schreef op vrijdag 19 februari 2016 @ 15:18:
[...]

Die html index en js index staan in socketgpio. De images staan in socketgpio/imagemap. Hun link zou dan ook zijn: socketgpio/imagemap/image1.png

Dit is het index.js file

De __dirname + '/image1.png' zou dan moeten resolven naar /socketgpio/image1.png , niet naar de map waar je images staan. __dirname is toch een variabele waar je documentroot van je Node.JS-server in staat?

[gekkie]

RobIII schreef op vrijdag 19 februari 2016 @ 15:15:
[...]

Dat kun je toch ook prima zien in je Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly

Ook best .. wat jij wilt .. succes verder maar weer, i'm out.

[Pizza_Boom]

Merethil schreef op vrijdag 19 februari 2016 @ 15:20:
[...]


De __dirname + '/image1.png' zou dan moeten resolven naar /socketgpio/image1.png , niet naar de map waar je images staan. __dirname is toch een variabele waar je documentroot van je Node.JS-server in staat?

Er staat nog een stukje boven: app.get('/' functio(... Waarbij het stukje tussen de aanhalingstekens je map neer zet. Door alleen de slash te gebruiken, geef je root aan. Door /imagemap, zoals ik dus doe, te gebruiken, geef je aan dat hij in zijn root nog een map dieper moet bezoeken. Althans, dat is zoals ik het begrepen heb.

[ Voor 3% gewijzigd door Pizza_Boom op 19-02-2016 15:23 ]

[Merethil]

Pizza_Boom schreef op vrijdag 19 februari 2016 @ 15:23:
[...]
Er staat nog een stukje boven: app.get('/' functio(... Waarbij het stukje tussen de aanhalingstekens je map neer zet. Door alleen de slash te gebruiken, geef je root aan. Door /imagemap, zoals ik dus doe, te gebruiken, geef je aan dat hij in zijn root nog een map dieper moet bezoeken. Althans, dat is zoals ik het begrepen heb.

Ah daar gaat mijn NodeJS-kennis (geen) de mist in, ik had niets anders dan logica als backup voor m'n opmerking. Ik zou zelf denken dat die '/' zou staan voor een bepaalde gemapte actie in je backend, zoals de meeste interacties tussen frontend en backend werken in andere talen/frameworks.

Heb je van je Node.JS-server geen logfiles?

[RobIII]

Pizza_Boom schreef op vrijdag 19 februari 2016 @ 15:18:
In de console monitor (F12) zie ik geen errors komen. De terminal van de host (die RPi) geeft ook geen errors. De pagina wordt ook gewoon geserveerd, alleen met broken images.

Wat zie je in de network tab? Gaat er een request uit? En zo ja: met welke HTTP status code (200? 404? 500? Anders?) wordt die beantwoord?

[EddoH]

En wat geeft sendfile voor eventuele error?

code:

 res.sendFile(fileName, options, function (err) {
    if (err) {
      console.log(err);
      res.status(err.status).end();
    }
    else {
      console.log('Sent:', fileName);
    }
  });

(docs: http://expressjs.com/en/api.html#res.sendFile)

[Pizza_Boom]

Merethil schreef op vrijdag 19 februari 2016 @ 15:24:
[...]


Ah daar gaat mijn NodeJS-kennis (geen) de mist in, ik had niets anders dan logica als backup voor m'n opmerking. Ik zou zelf denken dat die '/' zou staan voor een bepaalde gemapte actie in je backend, zoals de meeste interacties tussen frontend en backend werken in andere talen/frameworks.

In dit example wordt ie even kort behandeld.

Heb je van je Node.JS-server geen logfiles?

De NPM logger maakt alleen debug loggers aan als er een error komt. Nu komt er geen error, het packet loopt gewoon soepeltjes door, dus niets.

RobIII schreef op vrijdag 19 februari 2016 @ 15:26:
[...]

Wat zie je in de network tab? Gaat er een request uit? En zo ja: met welke HTTP status code (200? 404? 500? Anders?) wordt die beantwoord?

Ik krijg een 404 GET terug.

[TheNephilim]

Als ik dit voorbeeld (https://github.com/expressjs/serve-static) zo zie:

JavaScript:

app.use(serveStatic(__dirname + '/public', {
  maxAge: '1d',
  setHeaders: setCustomCacheControl
}))

Dan kan ik me niet voorstellen dat je dan <img src="public/image.jpg" /> moet gebruiken. Ik neem aan zónder die public/ dus.

[ Voor 4% gewijzigd door TheNephilim op 19-02-2016 15:34 ]

[Merethil]

Pizza_Boom schreef op vrijdag 19 februari 2016 @ 15:32:
[...]
In dit example wordt ie even kort behandeld.

Ik zie alleen wat over Route Handlers staan, dus het routeren naar een specifieke method wanneer in je URL specifieke route identifiers staan; niets over folders. Nou wil ik niet discussieren over heel Node.JS maar ik weet niet zeker of 't werkt zoals jij denkt dat 't werkt.

Check ook even deze pagina: http://expressjs.com/en/guide/routing.html

[Pizza_Boom]

Ik ga het een en ander eens even opnieuw doorlezen en uitproberen en dan meld ik mij weer.

[TheNephilim]

Nog niet echt wat gedaan met NodeJS/etc. maar ik kon het niet laten om het even zelf te proberen

/index.js

JavaScript:

var express = require('express')
var serveStatic = require('serve-static')

var app = express()

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.use(serveStatic('public'))

app.listen(3000)

^ Spreekt voor zich denk ik.

/public

In /public heb ik een plaatje (fat-baby.jpg) en die kan ik zo benaderen in de browser: http://localhost:3000/fat-baby.jpg.

index.html

Die doet het ook, dus wellicht zit het ergens anders. Probeer express().use(express.static('/imagemap'); eens te herschrijven, misschien is die new-up van express() wel niet de bedoeling.

[ Voor 22% gewijzigd door TheNephilim op 19-02-2016 15:58 ]

[Pizza_Boom]

Ik zie alleen een verschil: Jij maakt gebruik van de serveStatic library. ExpressJS zou het ook zonder moeten kunnen en dat is wat ik eigenlijk wil doen.

EDIT: Vooralsnog lijkt dit regeltje wel te doen wat ik wil: app.use('/', express.static(__dirname));, maar ik lees op het web al mensen die klagen dat hij op deze manier gewoon alles zou delen wat er in je home directory staat. Nu is dat in dit geval niet zo erg, want dat moet ook gedeeld worden, maar ik kan mij voorstellen dat er situaties zijn dat je dat niet wilt.
Ik zie momenteel geen verschil met app.use('/imagemap', express.static(__dirname + '/imagemap'));, maar ik heb het vermoeden dat de eerste alles dat onder de home directory staat op public gooit, terwijl de tweede alleen alles onder de imagemap staat op public gooit. Moet dus eens getest worden.

Ga ik eens over slapen.

[ Voor 72% gewijzigd door Pizza_Boom op 20-02-2016 01:30 ]

[R4gnax]

Pizza_Boom schreef op zaterdag 20 februari 2016 @ 01:17:
ik heb het vermoeden dat de eerste alles dat onder de home directory staat op public gooit, terwijl de tweede alleen alles onder de imagemap staat op public gooit.

Dat klopt. Kom je eigenlijk vrij makkelijk achter door gewoon de API documentatie van Express te lezen.

Let verder op dat __dirname niet een global is. Deze is uniek per CommonJS module en bevat het pad naar de directory waarin de huidig draaiende module staat; de huidig draaiende en dus niet de hoofdmodule waarmee de applicatie gestart is, zoals veel plekken op het web foutief voorlichten.

Verwacht dus als je __dirname op meer plekken gaat gebruiken niet, dat je straks zomaar files anders op kunt gaan splitsen in kleinere modules en in een andere folderstructuur kunt gaan zetten, want dan gaan er dus echt dingen stuk.

Een trucje wat je kunt gebruiken om je 'root pad' altijd beschikbaar te houden wanneer je met Express werkt, is om als allereerste, voordat je enige andere middleware registreert, het volgende te registreren:

JavaScript:

app.use(function(request, response, next) {
  request.appRootPath = __dirname;
  next();
});

Dan hebben al je inkomende request objecten een appRootPath property die gegarandeerd klopt. Let alleen wel even op dat dit natuurlijk alleen werkt wanneer je deze middleware functie registreert vanuit een module in de project root directory!

[ Voor 5% gewijzigd door R4gnax op 20-02-2016 10:03 ]

[Mebus]

Stel we hebben de volgende map structuur:

code:

/middleware
/models
/public
   /css
   /js
   -index.html
/routes
/views
-app.js

Als je een map open stelt dmv app.use(express.static())

Dan is de map die je opent ook de root. Dus wanneer je de map public open zet:

code:

var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));

En vervolgens naar http://localhost/ gaat dan word automatisch al index.html uit de public map verzonden.

https://github.com/expressjs/serve-static#index

Dus is

code:

res.sendFile(__dirname + '/index.html');

eigenlijk al helemaal niet nodig. Maar toch ook weer wel als je wilt dat een javascript framework zoals Angular de routing wilt laten doen (clientside).

Wat je dus al wilt gebruiken is het volgende stukje code (SEO):

code:

var path = require('path');
app.use(express.static(path.join(__dirname, 'public'), { index: false }));

Nu werken links zoals: http://localhost/?x=y ook. Hier kwam ik achter zodra ik over het stukje SEO (google) begon..

Verder, een root path defineren in app.js is handig. Maar zorgt ook weer voor een onnodig stukje code. Een stukje code van mijn eigen render service (SEO, prerender, phantomjs):

code:

res.sendFile('index.html', {root: __dirname + '/../public/renders/'});

res.sendFile() heeft een beveiliging ingebouwd zodat men niet zomaar door je bestandssysteem kan neuzen ../ werkt dus niet zomaar. Maar in app.js de root map definiëren zoals R4gnax aangaf is voor nu wat makkelijker.

Wat ik hier zojuist allemaal heb neergekwakt is wat ik tegen ben gekomen bij het maken van mijn website. Hoewel misschien niet alles wat ik schreef jou nu kan helpen, hoop ik dat dat wel kan in de toekomst (SEO is nu al een stuk makkelijker geworden voor je).

Probeer dan ook zoveel mogelijk via google te vinden, iets dat tot nu toe mij elke keer een oplossing heeft kunnen bieden. Hier nog een nodeJS website waar ik veel van heb geleerd: https://github.com/joel1st/championweb aka http://champion.gg/

https://scotch.io/tag/node-js
http://www.sitepoint.com/javascript/nodejs-javascript/
http://expressjs.com/en/starter/static-files.html

[ Voor 4% gewijzigd door Mebus op 20-02-2016 19:36 ]

[Pizza_Boom]

Dank jullie allemaal voor de uitgebreide antwoorden. Niet alles is op mij van toepassing vanwege het feit dat het nog steeds een aansturing voor een stukje fysieke niet PC gerelateerde hardware is (via de GPIO van de RPi) en de gehele toepassing in principe niet beschikbaar zal zijn van buiten het lokale netwerk.

@ Mebus: Voordat ik hier iets neerplemp, heb ik eerst al uitgebreid gegoogled. Alleen omdat ik geen TIer o.i.d. ben, maar geschoold ben in elektrotechniek en werktuigbouwkunde, ontbreken bij mij nog wel eens de juiste zoektermen (naast bepaalde schijnbaar basale kennis).

Ik zie een aantal links voorbij komen die ik al meerdere keren gelezen heb.

Voor nu dank ik jullie zeer, ik zal dit de komende dagen vast nog wel een paar keer gaan lezen voordat het allemaal echt bezonken en aangekomen is.

[BramV]

het simpele antwoord is

<img src="image1.png" height="125" width="110" />

uitgebreid:

Denkfoutje was dat je dacht dat je de naam van de static map ook moet meegeven en dat is niet nodig.
Je moet het zien als een punt waarvandaan de server gaat zoeken naar hetgeen dat wordt opgevraagd.
De client hoeft/wil dat niet weten. Alles vanaf dat punt is wel op te vragen en is in feite public.

ook als je de index.html in je imagemap zet wordt die ook verstuurd

http://127.0.0.1:3000/index.html (met <img src="image1.png" height="125" width="110" /> )
http://127.0.0.1:3000/image1.png


var express = require('express');
var app = express();

app.use(express.static('imagemap'));

app.listen(3000, function () {
});

[ Voor 26% gewijzigd door BramV op 22-02-2016 11:42 ]

[Pizza_Boom]

Terwijl ik die plaatjes tot dusverre onder controle lijk te hebben (de plaatjes die veranderen nog niet ingevoerd), loop ik even vast op iets heel anders. Mijn sockets lijken niet open te staan. Aan de images is een onclick socket verbonden, maar als ik daarop klik dan krijg ik dat desbetreffende socket niet gedefinieerd is: TypeError: ImageSocket is undefined, met verwijzing naar regel 43 in onderstaande snippet. Ik definieer hem volledig in de html, bij mijn weten:

HTML:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html>
    <head>
        <title>Test V0.1</title>
    </head>
    <body>
        <script src="/socket.io/socket.io.js-1.4.5.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            var Images = [false, false, false, false, false, false, false, false]

            var ImageSocket;
            
            window.onload=function() {
                
                Imagesfn();
                
                const ImageUrl = window.location.origin + '/Imagespace'
                
                ImageSocket = io.connect(ImageUrl{forceNew: true});
                });
                
                ImageSocket.on('state', (data) => {
                    Images = data;
                    Imagefn();
            };  
        
        function Imagefn() {
            Images.map(function(value, key) {
                const ImageKnob = document.getElementById("Image_No_"+ key);
                if (Images[key] == true) {
                    ImageKnob.style.fill="#ff0000";
                }
                else {
                    ImageKnob.style.fill="#123456";
                }
            });
        }
        
        function ImageSelect(pin)
            {
                Images[pin] != Images[pin];
                ImageSocket.emit('state', Images);
                Imagefn();
            }
    </script>

In de gepostte indexfile staan een inputsocket en outputsocket. Die heb ik hier even uitgehaald voor de leesbaarheid, maar het maakt niet uit of ik ImageSocket, InputSocket of OutputSocket voor deze statements gebruik, de reference error blijft komen en telkens verwijzen naar desbetreffende regel.

[simon]

Even een kleine sidenote, waarom ExpressJS je statische content af laten handelen? Is Apache/nginx + node erachter niet handiger? Statische content via apache/nginx, dynamische stuff via Node. Ieder doet dan waar ze goed in zijn.

Voor je 2e issue, kan het zijn dat je ImageSocket niet vanuit de scope van de onClick te bereiken is?

Console.log helpt in dit soort gevallen vaak, om bijv na je init je ImageSocket te console loggen, ff kijken of die al er is, etc. Door wat basic debugging te gebruiken kun je al de obvious problemen uitsluiten.

[ Voor 24% gewijzigd door simon op 22-02-2016 17:24 ]

[Pizza_Boom]

simon schreef op maandag 22 februari 2016 @ 17:23:
Even een kleine sidenote, waarom ExpressJS je statische content af laten handelen? Is Apache/nginx + node erachter niet handiger? Statische content via apache/nginx, dynamische stuff via Node. Ieder doet dan waar ze goed in zijn.

Ik probeer momenteel zo min mogelijk talen te gebruiken. Ik heb apache op de RPi gehad, maar het valt mij op dat dit een erg zwaar pakket is en veel resources gebruikt. Daarbij ben ik geen echte ontwikkelaar, hoe meer talen, hoe lastiger het voor mij wordt.

Voor je 2e issue, kan het zijn dat je ImageSocket niet vanuit de scope van de onClick te bereiken is?

Hij is bereikbaar. Ik heb volgend op de ImageSocket onclick functie een pop up message hangen die middels een andere onclick bereikbaar is en die doet het wel gewoon. Die staat op hetzelfde level, dus ik verwacht dat ze gewoon bereikbaar zijn.

Console.log helpt in dit soort gevallen vaak, om bijv na je init je ImageSocket te console loggen, ff kijken of die al er is, etc. Door wat basic debugging te gebruiken kun je al de obvious problemen uitsluiten.

Dat is dus het gekke. Zoals je ziet in de index file, hangt er aan de serverkant een console log in. Bij verbinden zou deze moeten aangeven dat ie verbonden is met beide sockets, echter gebeurt dat niet. Alleen de standaardmeldingen, die altijd komen als ik hem activeer, blijven komen in de terminal en de cliëntafhankelijke meldingen, die komen als er een sessie gestart wordt, komen niet.

[simon]

Nginx zal je raspberry pi de kop niet kosten, en met wat google heb je 't zo draaiend (bijv: http://blog.argteam.com/c...nx-to-avoid-node-js-load/)

Je error zegt dat ImageSocket undefined is, dus dat de variabele niet gedefinieerd is. Gebeurt er in de tussentijd nog iets met je ImageSocket?

Ik zou vooral goed via je console alles doorlopen, elke stap console.log doen.

Kijk ook eens hiernaar;
https://developer.chrome....docs/javascript-debugging
https://developers.google...vtools/debug/breakpoints/

Zodat je voldoende info hebt over wat er nu daadwerkelijk in je script gebeurt.

[BramV]

JavaScript:

<html>
    <head>
        <title>Test V0.1</title>
    </head>
    <body>
        <script src="/socket.io/socket.io.js-1.4.5.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            var Images = [false, false, false, false, false, false, false, false]

            var ImageSocket;
        
        
        function Imagefn() {
            Images.map(function(value, key) {
                const ImageKnob = document.getElementById("Image_No_"+ key);
                if (Images[key] == true) {
                    ImageKnob.style.fill="#ff0000";
                }
                else {
                    ImageKnob.style.fill="#123456";
                }
            });
        };
        
        function ImageSelect(pin)
            {
                Images[pin] != Images[pin];
                ImageSocket.emit('state', Images);
                Imagefn();
            }


      $( document ).ready(function() {
         Imagefn();
      });
            
            window.onload=function() {


                const ImageUrl = window.location.origin + '/Imagespace'
                
                ImageSocket = io.connect(ImageUrl,{forceNew: true});
                
                
                ImageSocket.on('state', (data) => {
                    this.Images = data;
                    this.Imagefn();
                })
                
            }
        
        
    </script>

 

[pedorus]

Ik zie allemaal "javascript" in dit topic die mij niet geschikt lijkt om naar de browser te sturen. Ofwel niet eens compileerbaar dus dat zie je direct, ofwel niet compatible genoeg: https://kangax.github.io/compat-table/es6/ En ook met allerlei dingen door elkaar heen alsof er gecopy-paste is in de hoop at het dan gaat werken. Bijv. window.onload zou ik niet gebruiken, net als { op aparte regel, ; of niet zou ik kiezen, inspringing zou ik laten kloppen, => is niet compatible.

Haal je die eerste grote blob door zeg http://jsbeautifier.org/ heen dan zie je gelijk ook een aantal compilatieproblemen. Bij de post hierboven doe je je een groot plezier door zo iets simpels. Een goede IDE doet dit zo voor je, waarom zou je het jezelf moeilijk maken?