Primer09

Izpis dnevnika s funkcionalnostjo pomika besedila

Razvili bomo funkcijo, ki nam bo omogočila bolj pregleden izpis sporočil na strani klienta. Funkcija bo imela realiziran pomik besedila ("scroll"). Hkrati bomo izpisali številko dnevniškega zapisa. Funkcija bo v nadaljevanju uporabna pri izpisu podatkov pridobljenih iz mikrokontrolerja v realnem času.

1. Dodamo dve spremenljivki, za določitev, kdaj se bo izvedel pomik ("scroll") besedila ter števec zapisov v datoteki primer09.html (izhajamo iz primera 08; obe datoteki, t.j. .js in .html preimenujemo v 09):

var številoVrsticPredPomikom = 10; // število vrstic, ki jih bomo izpisali pred pomikom

var števecIzpisanihVrstic = 0;

2. Spremenimo funkcijo log tako, da je izveden pomik:

dodamo nove vrednosti na vrhu, da so sporočila vedno vidna:
- insertBefore(node, divElement.childNodes[0])
če je število vrstic v <div> večje kot je bilo določeno izbrišemo najstarejši izpis:
- divElement.removeChild

Sedaj uporabimo funkcijo za izpis sporočil na naslednji način:

log(sporočilo); // dodamo sporočilo

Dopolnitve med primeroma primer08.html in primer09.html

V nadaljevanju so prikazane dopolnitve glede na predhodni primer označene krepko.

<!DOCTYPE html>

<meta charset = utf8>

<html>

<head>

    <title>Primer s tipko, funkcija protiodboja</title>

</head>

<body>

<div id="divZaIzpis"></div>

<br>

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

<script type="text/javascript">

"use strict"; // za uporabo razredov ("class")

var divZaIzpis = document.getElementById("divZaIzpis");

// spremenljivka za izpis sporočil

var številoVrsticPredPomikom = 10; // število vrstic, ki jih bomo izpisali pred pomikom

var števecIzpisanihVrstic = 0;

function log(sporočilo) {

    var node=document.createElement("tr"); // ustvarimo spremenljivko "node" kot vrstico v tabeli ("tr")

    var textnode=document.createTextNode(števecIzpisanihVrstic + " | " + sporočilo); // ustvarimo element s števcem

    node.appendChild(textnode); // dodamo besedilo k spremenljivki "node", t.j. vrstico tabele

    divZaIzpis.insertBefore(node, divZaIzpis.childNodes[0]); // vstavimo v spremenljivko "node"

    if (števecIzpisanihVrstic > številoVrsticPredPomikom-1) { // če je vrstic več kot limita -> pričnemo s pomikom ("scroll")

    divZaIzpis.removeChild(divZaIzpis.childNodes[številoVrsticPredPomikom]); // odstranimo najstarejši izpis

    števecIzpisanihVrstic++; // povečamo števec izpisov

log("Pritisnite tipko na vezju");

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

socket.on("sporočiloKlientu", function (sporočilo){

    log(sporočilo); // dodamo sporočilo

});

</script>

</body>

</html>

Izgled uporabniškega vmesnika:

Občutljivost gumba lahko spreminjamo, postavimo ga npr. na 500ms, ali 750ms in testiramo delovanje. V datoteki .js spremenimo, na koncu funkcije setTimeout:

setTimeout(function() {

...

}, 50); // izvedemo po 50ms

Dodajmo izpis podatkov o klientu:

io.sockets.on("connection", function(socket) {

    socket.emit("sporočiloKlientu", "Strežnik povezan, Arduino pripravljen.");

    console.log("Socket id: " + socket.id);

    // izpišemo IP naslov, vrata, ip verzijo

    klientovIpNaslov = socket.request.socket.remoteAddress;

    io.sockets.emit("sporočiloKlientu", "socket.request.socket.remoteAddress: " + socket.request.socket.remoteAddress);

    // ::ffff:192.168.254.1 je ipv6 naslov

    // v Chrome vpišemo: http://[::ffff:192.168.254.131]:8080 -> http://[::ffff:c0a8:fe83]:8080

    io.sockets.emit("sporočiloKlientu", "socket.request.connection._peername.family: " + socket.request.connection._peername.family);

    io.sockets.emit("sporočiloKlientu", "socket.request.connection._peername.port: " + socket.request.connection._peername.port);

    io.sockets.emit("sporočiloKlientu", "socket.id: " + socket.id);

    // izluščimo ipv4 naslov ->

    var idx = klientovIpNaslov.lastIndexOf(':');

    var address4;

    if (~idx && ~klientovIpNaslov.indexOf('.')) address4 = klientovIpNaslov.slice(idx + 1);

    io.sockets.emit("sporočiloKlientu", "ipv4 naslov: " + socket.request.socket.remoteAddress);

    io.sockets.emit("sporočiloKlientu", "Podatki o klientu ----------------------------->");

    pošljiVrednostPrekoVtičnika = function (value) {

        io.sockets.emit("sporočiloKlientu", value);

}); // konec "sockets.on connection"

Rezultati so prikazani na naslednji sliki. Opazimo lahko različne IP-je različnih klientov, ki se povežejo na naš strežnik (tu spremenimo število vrstic pred pomikom, npr. na 20 ali več):

Če v Chrome vtipkamo http://[::ffff:192.168.1.136]:8080 bomo lahko opazili pretvorbo iz IPv4 naslova v IPv6 naslov.

Npr., če vnesem http://[::ffff:192.168.1.136]:8080 dobim http://[::ffff:c0a8:188]:8080/

Sicer lahko vnesemo tudi IPv6 naslov, ki ga dobimo v bash-u z ukazom ifconfig, npr. (ifconfig -> fe80::ba27:ebff:fe0d:e930):

http://[fe80::ba27:ebff:fe0d:e930]:8080/

Google Sites

Report abuse