Uporaba spletnih vtičnikov ("web socket") s knjižnico socket.io

Vezava ostane ista kot v predhodnem primeru. Tokrat bomo kontrolirali le eno od svetlečih diod. S pomočjo spletnih vtičnikov lahko izvedemo neprekinjeno povezavo med klientom in strežnikom, kar je alternativa mehanizmu zahteve in odziva ("request - response"). Stalna povezava nam omogoča spremembo vrednosti na digitalnih izhodih v realnem času (tu moramo upoštevati zakasnitev sistema). Prav tako je možno spremljanje vrednosti iz mikrokrmilnika v realnem času. Tu sicer nastopajo omejitve strojne opreme, t.j. pretočnost, ki jo zagotavlja mrežna oprema.

Za vzpostavitev permanentne povezave med klientom in strežnikom bomo tako uporabili knjižnico socket.io

V tem primeru bomo ustvarili dve datoteki: primer04.js v katerem bo zapisana koda na strani strežnika ter primer04.html, kjer bomo zapisali kodo na strani klienta, ki bo vsebovala uporabniški vmesnik (GUI). html stran je posredovana klientu ob prvi vzpostavitvi povezave s strežnikom, t.j. ko vnesemo v spletni brskalnik IP naslov in vrata.

Opis kode v datoteki primer04.js

Zaradi preglednosti bomo uporabili nekoliko drugačen zapis funkcije, ki obdela zahtevo in odziv. Uporabili bomo ročico ("handler"), ki jo bomo v nadaljevanju še definirali:

var http = require("http").createServer(handler);

Ker potrebujemo knjižnico socket.io jo uvozimo z ukazom "require":

var io = require("socket.io").listen(http); // knjižnica za vtičnike

Prav tako bomo potrebovali knjižnico za delo z datotečnim sistemom ("file system" ~ fs):

var fs = require("fs"); // knjižnica za delo z datotečnim sistemom ("file system fs")

"handler" definiramo na naslednji način:

function handler(req, res) { // "handler", ki je uporabljen pri require("http").createServer(handler)

    fs.readFile(__dirname + "/primer04.html", // povemo, da bomo ob zahtevi ("request") posredovali

    function (err, data) {                    // klientu datoteko primer04.html iz diska strežnika

        if (err) {

            res.writeHead(500, {"Content-Type": "text/plain"});

            return res.end("Napaka pri nalaganju html strani.");

        }

    res.writeHead(200);

    res.end(data);

    });

}

Strežnik bo poslušal na vratih 8080:

http.listen(8080); // strežnik bo poslušal na vratih 8080

Ob vzpostavljeni povezavi preko vtičnika (socket) čakamo na sporočilo "ukazArduinu". V primeru, da klient pošlje tovrstno sporočilo strežniku preberemo parameter sporočila {štUkaza} in glede na številko ukaza svetlečo diodo prižgemo ali ugasnemo:

Opis kode v datoteki primer04.html

html del v datoteki primer04.html vsebuje kodo za gumba ter oddajo sporočilo preko vtičnika strežniku.

Naslednja koda doda na html stran gumba ter izvede ustrezen klic na funkciji prižgi1 ali ugasni1:

V nadaljevanju uvozimo na stran klienta knjižnico za delo z vtičniki ("socket"):

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

Nato, v delu z zapisom JavaScript-a, vzpostavimo permanentno povezavo med klientom in strežnikom preko vtičnika ("socket"); tu vpišite svojo številko IP (136 ~ xyz):

var socket = io.connect("192.168.1.136:8080"); // povez. prek vtičnika

Ob pritisku gumba sprožimo ustrezno funkcijo, ki preko vtičnika posreduje sporočilo "ukazArduinu" skupaj z ustreznim parametrom 1 ali 0:

Gumba sta sicer precej "špartanska". Tu lahko uporabimo css, da zadevo prikažemo nekoliko bolj estetsko:

primer04.js

primer04.html