Einführung in die Erstellung eines einfachen Chatrooms mit node.js-js-Tutorial-php.cn

Einführung in die Erstellung eines einfachen Chatrooms mit node.js

青灯夜游

Freigeben： 2021-02-01 11:24:07

nach vorne

2897 Leute haben es durchsucht

Wie erstelle ich einen einfachen Chatroom mit nodejs? Der folgende Artikel stellt es Ihnen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Einführung in die Erstellung eines einfachen Chatrooms mit node.js

Verwandte Empfehlungen: „nodejs-Video-Tutorial“

Ich habe gerade mit dem Erlernen von js begonnen. In diesem Artikel geht es um die Implementierung eines einfachen Online-Chatroom-Systems (Chat-Gruppe) basierend auf node.js und Websocket.

Dieser Artikel ist für Anfänger zum Lesen geeignet.

Ohne weitere Umschweife, fangen wir offiziell an.

Wenn wir in der B/S-Architektur Daten erhalten möchten, müssen wir diese vom Server anfordern, und dann antwortet der Server. Wenn unser Client also keine Anfrage sendet, ergreift der Server dann die Initiative, etwas an unseren Client (Browser) zu senden?

Die Antwort ist nein, der Client und der Server verbinden sich über das TCP/IP-Protokoll und fordern die Verbindung dann über das HTTP-Protokoll an. Das HTTP-Protokoll ist ein Anforderungs-Antwort-Protokoll und ein zustandsloses Protokoll, das heißt, es besteht keine Beziehung zwischen jeder Anforderung und Antwort.

Und was brauchen wir für unseren Chatroom?

1. Eine Nachricht senden 2. Eine Nachricht empfangen

Beim Empfang einer Nachricht: Ein Client sendet eine Nachricht an den Server, der Server empfängt die Nachricht und sendet sie dann aktiv an einen anderen Client.

HTTPkann alsounsere Anforderungen nicht erfüllen. Hier verwenden wir das Socket-Protokoll. Wenn Server und Client verbunden sind, sind beide jederzeit zum Senden und Empfangen von Nachrichten bereit.

Laden Sie zuerst das socket.io-Modul in npm herunter (node.js muss vorher installiert werden). Öffnen Sie cmd.

(Ich habe einen Node.js-Chat-Ordner erstellt und alle Dateien darin abgelegt)

Dann beginnen Sie mit dem Schreiben unseres Servercodes und erstellen Sie die Datei 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); //发送消息给所有客户端（广播）
    });
});

Nach dem Login kopieren

Dann fangen Sie an, den Kunden zu schreiben.

Da unser Server socket.io verwendet, sollte der zu socket.io entsprechende Dienst im Client verwendet werden. Hier habe ich direkt eine js-Datei eingeführt.

Erstellen Sie die Datei 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>

Nach dem Login kopieren

An diesem Punkt ist der Codeteil abgeschlossen. Öffnen Sie als nächstes cmd und führen Sie unsere Datei aus.

Sie können jetzt den Browser öffnen, um den Effekt zu sehen. Öffnen Sie den Browser und besuchen Sie die Adresse http://localhost:8000/. Öffnen Sie noch ein paar Seiten, um den Effekt auszuprobieren.

Auf diese Weise wird ein einfacher lokaler Chatroom fertiggestellt. Sie können es auf den Server übertragen und mit anderen chatten (ich werde mehr darüber schreiben, wenn ich Zeit habe).

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierlehre! !

Das obige ist der detaillierte Inhalt vonEinführung in die Erstellung eines einfachen Chatrooms mit node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!