Introduction à la création d'une salle de discussion simple avec node.js-js tutoriel-php.cn

Introduction à la création d'une salle de discussion simple avec node.js

青灯夜游

Libérer： 2021-02-01 11:24:07

avant

2876 Les gens l'ont consulté

Comment créer une salle de discussion simple en utilisant nodejs ? L’article suivant vous le présentera. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Introduction à la création d'une salle de discussion simple avec node.js

Recommandations associées : "Tutoriel vidéo nodejs"

Je viens de commencer à apprendre js. websocket pour implémenter un système de salle de discussion en ligne simple (groupe de discussion).

Cet article convient aux débutants.

Sans plus attendre, commençons.

Dans l'architecture B/S, si nous voulons obtenir une donnée, nous devons demander au serveur, puis le serveur répond. Donc si notre client n'envoie pas de requête, le serveur prendra-t-il l'initiative d'envoyer quelque chose à notre client (navigateur) ?

La réponse est non, le client et le serveur se connectent via le protocole TCP/IP, puis demandent la connexion via le protocole HTTP. Le protocole HTTP est un protocole requête-réponse, et c'est un protocole sans état, c'est-à-dire qu'il n'y a aucune relation entre chaque requête et réponse.

Et de quoi avons-nous besoin pour notre salon de discussion ?

1. Envoyer un message 2. Recevoir un message

En réception d'un message : un client envoie un message au serveur, le serveur reçoit le message, et ensuite prend l'initiativeEnvoyer à un autre client.

Le HTTP ne peut donc pas répondre à nos exigences. Ici, nous utiliserons le protocole socket. Lorsque le serveur et le client sont connectés, les deux sont toujours prêts à envoyer et à recevoir des messages.

Téléchargez d'abord le module socket.io dans npm (node.js doit être installé au préalable). Ouvrez cmd.

(J'ai créé un dossier de discussion node.js et les fichiers y sont placés)

Ensuite, commencez à écrire notre code serveur et à créer des fichiers server.js .

//server.js

var http = require(&#39;http&#39;);
var fs = require(&#39;fs&#39;);
var ws = require(&#39;socket.io&#39;); //引入socket.io

var server = http.createServer(function (req, res) {
    var html = fs.readFileSync(&#39;./client.html&#39;); 
   //client.html是发送给客户端的文件(客户端界面)

    res.end(html);
}).listen(8000);

var io = ws(server); //http服务与ws服务相关联, 返回io服务实例

//监听用户的连接事件
io.on(&#39;connection&#39;,function (socket) {      
    //发生在用户连接io服务器时
    console.log(&#39;有新用户进入房间&#39;);

    //消息发送事件
    socket.on(&#39;message&#39;,function (obj) {
       console.log(obj);
       io.emit(&#39;message&#39;,obj); //发送消息给所有客户端（广播）
    });
});

Copier après la connexion

Ensuite, commencez à écrire le client.

Comme notre serveur utilise socket.io, le service correspondant à socket.io doit être utilisé dans le client. Ici, j'ai directement introduit un fichier js.

Créez le fichier client.html.

//client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js+webSocket聊天室</title>
</head>
<body>
<h1>liky聊天室</h1>
<textarea name="" id="text" ></textarea>
<button id="btn">发送</button>

<script src="http://wulv5.com/js/socket.io.min.js"></script>
<script>
    var socket = io.connect("/"); //连接聊天室的io服务器 io服务器的根地址

    var oText = document.getElementById("text");
    var oBtn = document.getElementById("btn");

    var myMessage = "";

    oBtn.onclick = function () {
        var mes = oText.value;

        //当消息为空时
        if(!mes){
            return;
        }
        myMessage = mes;
        socket.send(mes); //发送消息到服务器
        oText.value = ""; //清空文本框
    }

    //当服务器广播消息时，触发message事件，消息内容在回调函数中
    socket.on(&#39;message&#39;,function (mm) {
        var p = document.createElement(&#39;p&#39;);
        p.innerText = mm;
        if(myMessage === mm){
            p.style.cssText = "color:red;margin-left:10%";
        }
        document.body.appendChild(p);
    })

</script>
</body>
</html>

Copier après la connexion

À ce stade, la partie code est terminée. Ensuite, ouvrez cmd et exécutez notre fichier.

Vous pouvez ouvrir le navigateur maintenant pour voir l'effet. Ouvrez le navigateur et visitez l'adresse http://localhost:8000/. Ouvrez quelques pages supplémentaires pour essayer l'effet.

De cette façon, un simple salon de discussion local est complété. Vous pouvez le transférer sur le serveur et discuter avec d’autres (j’écrirai plus à ce sujet quand j’aurai le temps).

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!