Chat en direct avec NodeJS, Socket.io et ExpressJS

NodeJS me permet d'écrire du code backend dans l'un de mes langages préférés : JavaScript. C'est la technologie parfaite pour créer des applications en temps réel. Dans ce tutoriel, je vais vous montrer comment créer une application de chat Web à l'aide d'ExpressJS et Socket.io.

---

Configurer l'environnement

Bien sûr, la première chose à faire est d'installer NodeJS sur votre système. Si vous êtes un utilisateur Windows ou Mac, vous pouvez visiter nodejs.org et télécharger le programme d'installation. Si vous préférez Linux, je vous recommande de vous référer à ce lien. Même si je n'entrerai pas dans les détails, si vous rencontrez des problèmes d'installation, je serai heureux de vous aider. Laissez simplement un commentaire sous cet article.

Après avoir installé NodeJS, vous pouvez configurer les outils dont vous avez besoin.

1. ExpressJS - Cela gérera le serveur et les réponses à l'utilisateur
2. Jade - Moteur de modèles
3. Socket.io - permet une communication en temps réel entre le frontend et le backend

Allez-y et créez un fichier package.json dans un répertoire vide avec le contenu suivant.

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

En utilisant la console (sous Windows - Invite de commandes), accédez à votre dossier et exécutez :

npm install

En quelques secondes, toutes les dépendances requises seront téléchargées dans le répertoire node_modules.

---

Développer le backend

Commençons par un simple serveur qui servira les pages HTML de l’application, puis passons à la partie la plus intéressante : la communication en temps réel. Créez un fichier index.js en utilisant le code expressjs principal suivant :

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);

Ci-dessus, nous avons créé une application et défini ses ports. Ensuite, nous enregistrons une route, qui dans ce cas est une simple requête GET sans aucun paramètre. Actuellement, le gestionnaire de la route envoie simplement du texte au client. Enfin, bien sûr, en bas, nous exécutons le serveur. Pour initialiser l'application, exécutez depuis la console :

node index.js

Le serveur est en cours d'exécution, vous devriez donc pouvoir ouvrir http://127.0.0.1:3700/ et voir :

It works!

Maintenant, au lieu de "ça marche", nous devrions fournir du HTML. Il pourrait être plus avantageux d’utiliser un moteur de modèles plutôt que du HTML simple. Jade est un excellent choix et s'intègre parfaitement avec ExpressJS. C'est ce que j'utilise habituellement dans mes propres projets. Créez un répertoire appelé tpl et placez-y le fichier page.jade suivant :

!!!
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')

La syntaxe de Jade n'est pas compliquée, cependant, pour un guide complet, je vous recommande de vous référer à jade-lang.com. Afin d'utiliser Jade avec ExpressJS, nous devons configurer les éléments suivants.

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

Ce code indique à Express où se trouvent vos fichiers de modèle et quel moteur de modèle utiliser. Tout cela spécifie la fonction qui gérera le code du modèle. Une fois que tout est mis en place, nous pouvons utiliser la méthode response 对象的 .render et envoyer notre code Jade à l'utilisateur.

Le résultat à ce stade n'a rien de spécial ; ce n'est rien de plus qu'un élément div 元素（id 为 content) qui servira de conteneur pour le message de discussion et deux contrôles (un champ de saisie et un bouton) que nous utiliserons pour envoyer le message. p>

Étant donné que nous utiliserons un fichier JavaScript externe pour contenir la logique frontale, nous devons indiquer à ExpressJS où rechercher ces ressources. Créez un répertoire vide public，并在调用 .listen Ajoutez les lignes suivantes avant la méthode.

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

Jusqu’ici tout va bien ; nous avons un serveur qui répond avec succès aux requêtes GET. Il est maintenant temps d'ajouter l'intégration Socket.io. Changez cette ligne :

app.listen(port);

À :

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

Ci-dessus, nous avons transmis le serveur ExpressJS à Socket.io. En fait, notre communication en direct se fera toujours sur le même port.

Ensuite, nous devons écrire le code qui reçoit le message du client et l'envoie à tous les autres clients. Chaque application Socket.io commence par un gestionnaire connection. Nous devrions en avoir un :

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

L'objet transmis au gestionnaire socket 实际上是客户端的套接字。将其视为服务器和用户浏览器之间的连接点。连接成功后，我们发送 welcome 类型的消息，当然，还会绑定另一个将用作接收器的处理程序。结果，客户端应该发出一条名为 send 的消息，我们将捕获该消息。接下来，我们只需使用 io.sockets.emit pour transmettre les données envoyées par l'utilisateur à toutes les autres sockets.

Avec le code ci-dessus, notre backend est prêt à recevoir et envoyer des messages au client. Ajoutons du code front-end.

---

Développer le front-end

Créez chat.js，并将其放置在应用程序的 public dans le répertoire. Collez le code suivant :

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 应用程序的更多信息？我们为您服务！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!