Live-Chat mit NodeJS, Socket.io und ExpressJS

NodeJS ermöglicht es mir, Backend-Code in einer meiner Lieblingssprachen zu schreiben: JavaScript. Es ist die perfekte Technologie zum Erstellen von Echtzeitanwendungen. In diesem Tutorial zeige ich Ihnen, wie Sie mit ExpressJS und Socket.io eine Web-Chat-Anwendung erstellen.

---

Richten Sie die Umgebung ein

Natürlich müssen Sie als Erstes NodeJS auf Ihrem System installieren. Wenn Sie ein Windows- oder Mac-Benutzer sind, können Sie nodejs.org besuchen und das Installationsprogramm herunterladen. Wenn Sie Linux bevorzugen, empfehle ich Ihnen, auf diesen Link zu verweisen. Ich werde hierauf zwar nicht näher eingehen, aber wenn Sie auf Installationsprobleme stoßen, helfe ich Ihnen gerne weiter; hinterlassen Sie einfach einen Kommentar unter diesem Artikel.

Nach der Installation von NodeJS können Sie die benötigten Tools einrichten.

1. ExpressJS – Dies verwaltet den Server und antwortet dem Benutzer
2. Jade - Template Engine
3. Socket.io – ermöglicht Echtzeitkommunikation zwischen Frontend und Backend

Erstellen Sie eine package.json-Datei in einem leeren Verzeichnis mit dem folgenden Inhalt.

{
    "name": "RealTimeWebChat",
    "version": "0.0.0",
    "description": "Real time web chat",
    "dependencies": {
        "socket.io": "latest",
        "express": "latest",
        "jade": "latest"
    },
    "author": "developer"
}

Navigieren Sie mithilfe der Konsole (in Windows – Eingabeaufforderung) zu Ihrem Ordner und führen Sie Folgendes aus:

npm install

Innerhalb von Sekunden werden alle erforderlichen Abhängigkeiten in das Verzeichnis node_modules heruntergeladen.

---

Backend entwickeln

Beginnen wir mit einem einfachen Server, der die HTML-Seiten der Anwendung bereitstellt, und gehen wir dann zum interessanteren Teil über: der Echtzeitkommunikation. Erstellen Sie eine index.js-Datei mit dem folgenden Kern-ExpressJS-Code:

var express = require("express");
var app = express();
var port = 3700;

app.get("/", function(req, res){
    res.send("It works!");
});

app.listen(port);
console.log("Listening on port " + port);

Oben haben wir eine Anwendung erstellt und ihre Ports definiert. Als nächstes registrieren wir eine Route, in diesem Fall eine einfache GET-Anfrage ohne Parameter. Derzeit sendet der Handler der Route lediglich Text an den Client. Schließlich führen wir natürlich ganz unten den Server aus. Um die Anwendung zu initialisieren, führen Sie Folgendes über die Konsole aus:

node index.js

Der Server läuft, Sie sollten also in der Lage sein, http://127.0.0.1:3700/ zu öffnen und Folgendes zu sehen:

It works!

Jetzt sollten wir statt „es funktioniert“ HTML bereitstellen. Es könnte vorteilhafter sein, eine Template-Engine anstelle von einfachem HTML zu verwenden. Jade ist eine großartige Wahl und verfügt über eine hervorragende Integration mit ExpressJS. Dies ist es, was ich normalerweise in meinen eigenen Projekten verwende. Erstellen Sie ein Verzeichnis mit dem Namen tpl und platzieren Sie die folgende page.jade-Datei darin:

!!!
html
    head
        title= "Real time web chat"
    body
        #content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
        .controls
            input.field(style='width:350px;')
            input.send(type='button', value='send')

Jades Syntax ist nicht kompliziert. Für eine vollständige Anleitung empfehle ich Ihnen jedoch, jade-lang.com zu besuchen. Um Jade mit ExpressJS verwenden zu können, benötigen wir das folgende Setup.

app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
    res.render("page");
});

Dieser Code teilt Express mit, wo sich Ihre Vorlagendateien befinden und welche Vorlagen-Engine verwendet werden soll. Alles gibt die Funktion an, die den Vorlagencode verarbeitet. Sobald alles eingerichtet ist, können wir die response 对象的 .render-Methode verwenden und unseren Jade-Code an den Benutzer senden.

Die Ausgabe an dieser Stelle ist nichts Besonderes; sie ist nichts weiter als ein div 元素（id 为 content-Element, das als Container für die Chat-Nachricht dient, und zwei Steuerelemente (ein Eingabefeld und eine Schaltfläche), die wir zum Senden der Nachricht verwenden.

Da wir eine externe JavaScript-Datei verwenden, um die Front-End-Logik zu speichern, müssen wir ExpressJS mitteilen, wo nach solchen Ressourcen gesucht werden soll. Erstellen Sie ein leeres Verzeichnis. public，并在调用 .listen Fügen Sie vor der Methode die folgenden Zeilen hinzu.

app.use(express.static(__dirname + '/public'));

Soweit so gut; wir haben einen Server, der erfolgreich auf GET-Anfragen reagiert. Jetzt ist es an der Zeit, die Socket.io-Integration hinzuzufügen. Ändern Sie diese Zeile:

app.listen(port);

An:

var io = require('socket.io').listen(app.listen(port));

Oben haben wir den ExpressJS-Server an Socket.io übergeben. Tatsächlich wird unsere Live-Kommunikation weiterhin über denselben Port stattfinden.

Als nächstes müssen wir den Code schreiben, der Nachrichten vom Client empfängt und an alle anderen Clients sendet. Jede Socket.io-Anwendung beginnt mit einem connection-Handler. Wir sollten eins haben:

io.sockets.on('connection', function (socket) {
    socket.emit('message', { message: 'welcome to the chat' });
    socket.on('send', function (data) {
        io.sockets.emit('message', data);
    });
});

Das an den Handler übergebene Objekt socket 实际上是客户端的套接字。将其视为服务器和用户浏览器之间的连接点。连接成功后，我们发送 welcome 类型的消息，当然，还会绑定另一个将用作接收器的处理程序。结果，客户端应该发出一条名为 send 的消息，我们将捕获该消息。接下来，我们只需使用 io.sockets.emit, um vom Benutzer gesendete Daten an alle anderen Sockets weiterzuleiten.

Mit dem obigen Code ist unser Backend bereit, Nachrichten zu empfangen und an den Client zu senden. Fügen wir etwas Front-End-Code hinzu.

---

Frontend entwickeln

Erstellen chat.js，并将其放置在应用程序的 public im Verzeichnis. Fügen Sie den folgenden Code ein:

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text });
    };

}

我们的逻辑包装在 .onload 处理程序中，只是为了确保所有标记和外部 JavaScript 均已完全加载。在接下来的几行中，我们创建一个数组，它将存储所有消息、一个 socket 对象以及一些 DOM 元素的快捷方式。同样，与后端类似，我们绑定一个函数，它将对套接字的活动做出反应。在我们的例子中，这是一个名为 message 的事件。当此类事件发生时，我们期望收到一个对象，data，其属性为 message。将该消息添加到我们的存储中并更新 content div。我们还包含了发送消息的逻辑。这非常简单，只需发出一条名为 send 的消息。

如果你打开http://localhost:3700，你会遇到一些错误弹出窗口。这是因为我们需要更新 page.jade 以包含必要的 JavaScript 文件。

head
    title= "Real time web chat"
    script(src='/chat.js')
    script(src='/socket.io/socket.io.js')

请注意，Socket.io 管理 socket.io.js 的交付。您不必担心手动下载此文件。

我们可以在控制台中使用 node index.js 再次运行我们的服务器并打开http://localhost:3700。您应该会看到欢迎消息。当然，如果你发送一些东西，应该显示在内容的div中。如果您想确保它有效，请打开一个新选项卡（或者更好的是，一个新浏览器）并加载应用程序。 Socket.io 的伟大之处在于，即使您停止 NodeJS 服务器它也能工作。前端将继续工作。一旦服务器再次启动，您的聊天也会正常。

在目前的状态下，我们的聊天并不完美，需要一些改进。

---

改进

我们需要做的第一个更改是消息的标识。目前，尚不清楚哪些消息是由谁发送的。好处是我们不必更新 NodeJS 代码来实现这一点。这是因为服务器只是转发 data 对象。因此，我们需要在那里添加一个新属性，并稍后读取它。在对 chat.js 进行更正之前，让我们添加一个新的 input 字段，用户可以在其中添加他/她的姓名。在 page.jade 中，更改 controls div:

.controls
    | Name: 
    input#name(style='width:350px;')
    br
    input#field(style='width:350px;')
    input#send(type='button', value='send')

接下来，在code.js中：

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        if(name.value == "") {
            alert("Please type your name!");
        } else {
            var text = field.value;
            socket.emit('send', { message: text, username: name.value });
        }
    };

}

为了总结这些变化，我们：

1. 为用户名的 input 字段添加了新快捷方式
2. 稍微更新了消息的呈现方式
3. 向对象添加了一个新的 username 属性，该属性将发送到服务器

如果消息数量过多，用户将需要滚动 div:

content.innerHTML = html;
content.scrollTop = content.scrollHeight;

请记住，上述解决方案可能不适用于 IE7 及更低版本，但没关系：IE7 是时候消失了。但是，如果您想确保支持，请随意使用 jQuery：

$("#content").scrollTop($("#content")[0].scrollHeight);

如果发送消息后输入字段被清除，那就太好了：

socket.emit('send', { message: text, username: name.value });
field.value = "";

最后一个无聊的问题是每次点击发送按钮。通过一点 jQuery，我们可以监听用户何时按下 Enter 键。

$(document).ready(function() {
    $("#field").keyup(function(e) {
        if(e.keyCode == 13) {
            sendMessage();
        }
    });
});

可以注册函数 sendMessage，如下所示：

sendButton.onclick = sendMessage = function() {
    ...
};

请注意，这不是最佳实践，因为它注册为全局函数。但是，对于我们在这里的小测试来说，一切都很好。

---

结论

NodeJS 是一项非常有用的技术，它为我们提供了巨大的力量和乐趣，特别是考虑到我们可以编写纯 JavaScript 的事实。正如您所看到的，仅用几行代码，我们就编写了一个功能齐全的实时聊天应用程序。非常整洁！

想要了解有关使用 ExpressJS 构建 Web 应用程序的更多信息？我们为您服务！

Das obige ist der detaillierte Inhalt vonLive-Chat mit NodeJS, Socket.io und ExpressJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!