Echtzeit-Anwendungen mit Nodes.js erstellen

Node.js ist eine Open-Source- und plattformübergreifende Laufzeitumgebung für JavaScript. Mit Node.js können wir JavaScript-Code überall ausführen und sind nicht nur auf die Browserumgebung beschränkt.

Node.js wurde erstmals im Jahr 2009 für Benutzer von Linux-Systemen entwickelt und eingeführt. Node.js wurde von Ryan Dahl entwickelt und von Joyent, dem Unternehmen, für das er arbeitet, gesponsert.

Mit Node.js können wir Echtzeitanwendungen einfach erstellen. Wie?

In diesem Artikel werden wir eine Wahlanwendung erstellen, um den Vorsitzenden zu wählen, sei es der Klassenvorsitzende, der Vorsitzende von RT?RW oder was auch immer. Die Wahlergebnisse werden in Echtzeit angezeigt, wobei jedes Mitglied, das die Option zur Verfügung stellt, alle Seiten mit den Wahlergebnissen aktualisiert, die von den Benutzern geöffnet werden.

Seltener Schritt zur Erstellung von Echtzeitanwendungen mit Node.j

  1. Node.js herunterladen und installieren. Wählen Sie das Betriebssystem aus, das Sie verwenden, und passen Sie es an.
  2. Erstellen Sie einen leeren Ordner, um das Projekt zu speichern. Diesen Ordner werden wir verwenden, um node scripts.js zu sichern und auch als Stammverzeichnis unseres Projekts. Wir erstellen zum Beispiel einen Ordner mit dem Namen „bardimin“ auf dem Verzeichnis „C“.
  3. Erstellen Sie eine Datei mit dem Namen „package.json“ auf „C:bardimin“ und kopieren Sie den folgenden Code
{
  "name": "Belajar_aplikasi_realtime",
  "description": "Learn real-time applications with Nodes.JS",
  "version": "1.0.0",
  "license": "MIT",
  "repository": "https://github.com/",
  "dependencies": {
    "express": "latest",
    "socket.io": "latest"
  }
}
  1. Öffnen Sie dann den Befehl promt/CMD und gehen Sie zu „C:bardimin“. Geben Sie den folgenden Befehl ein
npm install

Sobald der Vorgang abgeschlossen ist, sieht die Verzeichnisstruktur wie folgt aus

nodejs 01
  1. Im nächsten Schritt erstellen Sie eine Datei „server.js“ in dem von Ihnen erstellten Ordner und kopieren den folgenden Code:
var app = require("express")();
var http = require('http'). Server(app);
var io = require("socket.io")(http);

Listening port
http.listen(3000, function () {
    console.log("Listening on 3000");
});

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

Global Variable
const myData = {akbar: 0, goldie: 0};

/* This is auto initiated event when Client connects to Your Machien.  */
io.on("connection", (socket) => {
    console.log("A user is connected");
    socket.emit('newData', myData);
    socket.on('addData', (data) => {
        if (data === "akbar") {
            myData.akbar++;
        } else {
            myData.goldie++;
        }
        io.emit('newData', myData);
    })
});
  1. Dann öffnen Sie erneut die CMD und geben den Befehl „server node.js“ ein. Wenn alles richtig ist, sieht es wie folgt aus.
nodejs 02
  1. Der letzte Schritt besteht darin, eine Datei „index.html“ zu erstellen, die sich immer noch im selben Ordner befindet, und den folgenden Code zu kopieren
<html>
<head>
    <title>Chairman's election</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
    <script>
        $(document).ready(function () {
            const socket = io();
            socket.on('newData', (data) => {
                $("#pilihAkbr").text(data.akbar);
                $("#pilihGoldie").text(data.goldie);
            });
            $("#submit").click(() => {
                socket.emit('addData', $("#calon").val());
            });
        });
    </script>
</head>
<body>
<div style="width: 400px;margin:auto;text-align: center">
    <blockquote><b>Chairman's election</b></blockquote>
    <div>
        <table width="100%">
            <tr>
                <th>Candidates for Chairman of</th>
                <th>the Voting Results</th>
            </tr>
            <tr>
                <td>Akbar</td>
                <td id="pilihAkbr">0</td>
            </tr>
            <tr>
                <td>Goldie</td>
                <td id="pilihGoldie">0</td>
            </tr>
        </table>
    </div>
    <blockquote>
        <b>Choose your candidate:</b>
        <select id="calon" name="calon">
            <option value="akbar">Akbar
            <option value="goldie">Goldie
        </select>
        <blockquote>
            <button type="button" id="submit">Submit</button>
        </blockquote>
    </blockquote>
</div>
</body>
</html>
  1. Die Erstellung der Anwendung ist abgeschlossen. Nun ist es an der Zeit zu testen, ob die Anwendung bereits läuft.

Weitere interessante Artikel

Anwendungsprüfung

  • Reaktivieren Sie den Server wie in Schritt 6, mit dem Befehl „server node.js“ auf der CMD.
  • Öffnen Sie dann Ihren Browser und rufen Sie die URL „http://localhost:3000/“ auf.
  • Öffnen Sie die URL „http://localhost:3000/“ erneut in einer neuen Registerkarte oder in einem anderen Browser.
nodejs 03
  • Sie werden sehen, dass alle geöffneten Fenster automatisch aktualisiert werden, wenn Sie Daten übermitteln. Und in der CMD-Konsole können Sie nach Bedarf Benachrichtigungen erstellen.

Danke fürs Lesen… Möge es nützlich sein…

Neueste Artikel

Verwandte Artikel