Node.js + Express + Socket realisiert einen Online-Chatroom für mehrere Personen in Echtzeit

Node.js + Express + Socket realisiert einen Online-Chatroom für mehrere Personen in Echtzeit

In diesem Artikel wird der spezifische Code von Node.js + Express + Socket zur Realisierung eines Online-Chatrooms für mehrere Personen in Echtzeit zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Dateistruktur ist wie folgt:

Frontend-Teil:

Anmeldeseite Anmeldeteil:

anmelden.html

<!DOCTYPE html>  
<html lang="de"> 

<Kopf>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein">  
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">  
    <title>Anmelden</title>  
    <link rel="stylesheet" href="css/login.css" >  
</Kopf> 

<Text>  
    <div Klasse="Login-Box Flex-Box">  
        <!--Titelleiste für die Anmeldung-->  
        <h2 class="sign-title box-width">ANMELDEN</h2>  
        <!--Avatarleiste-->  
        <div Klasse="Bildkarussell">  
            <div Klasse="Pfeil linker Pfeil">  
                <div Klasse="vor-Pfeil"></div>  
            </div>  
            <img class="p1 img-setting" src="./img/1.jpg" alt="1.jpg">  
            <img class="p2 img-setting" src="./img/2.jpg" alt="2.jpg">  
            <img class="p3 img-setting" src="./img/3.jpg" alt="3.jpg">  
            <img class="p2 img-setting" src="./img/4.jpg" alt="4.jpg">  
            <img class="p1 img-setting" src="./img/5.jpg" alt="5.jpg">  
            <div Klasse="Pfeil nach rechts">  
                <div Klasse="nach-Pfeil"></div>  
            </div>  
        </div>  
        <!--Spalte „Benutzername“-->  
        <div Klasse="Name-Box Box-Breite">  
            <input type="text" class="user-name box-width" placeholder="Bitte geben Sie Ihren Namen ein">  
        </div>  
        <!--Bestätigungsspalte-->  
        <div Klasse="Schaltflächen-Box-Boxbreite">  
            <input type="button" class="login-button box-width" value="Im Chatroom anmelden">  
        </div>  
        <!--Spalte mit Fehlermeldung-->  
        <div Klasse="Fehlerbox Boxbreite">  
            <span class="error-message">Willkommen im Chatroom!</span>  
        </div>  
    </div>  
</body>  
<script src="js/login.js"></script> 

</html>

login.css

* {  
    Polsterung: 0;  
    Rand: 0;  
    Schriftfamilie: „Microsoft Yahei“;  
} 

html,  
Körper {  
    Breite: 100 %;  
    Höhe: 100%;  
    Schriftfamilie: „Microsoft Yahei“;  
    Anzeige: Flex;  
    Inhalt ausrichten: zentriert;  
    Elemente ausrichten: zentrieren;  
} 

Körper {  
    Hintergrund: linearer Farbverlauf (-135 Grad, Nr. 51D15B, Nr. 42A855);  
    Hintergrund: -moz-linear-gradient(-135 Grad, #51D15B, #42A855);  
    Hintergrund: -webkit-linear-gradient(-135 Grad, #51D15B, #42A855);  
    Hintergrund: -o-linear-gradient(-135 Grad, #51D15B, #42A855);  
} 

.flex-box {  
    Anzeige: Flex;  
    Inhalt ausrichten: zentriert;  
    Elemente ausrichten: zentrieren;  
} 

.box-Breite {  
    Breite: 80%;  
} 


/*Äußerste Schicht*/ 

.login-box {  
    Breite: 20 %;  
    Mindestbreite: 304px;  
    maximale Breite: 404px;  
    Höhe: 50%;  
    Mindesthöhe: 368px;  
    maximale Höhe: 468px;  
    Flex-Richtung: Spalte;  
    Kastenschatten: 1px 1px 15px #7B8C99;  
    Hintergrund: #fff;  
} 


/*LOGIN-Titel*/ 

.sign-title {  
    Farbe: #42A855;  
    Rand: 2px durchgezogen #42A855;  
    Rand oben: transparent;  
    Rand links: transparent;  
    Rand rechts: transparent;  
} 


/*Bildwechsel*/ 

.Bildkarussell {  
    Position: relativ;  
    Anzeige: Flex;  
    Marge: 10 %;  
} 


/*Bildwechselpfeil*/ 

.Pfeil {  
    Z-Index: 3;  
    Position: absolut;  
    Schriftgröße: 60px;  
    Höhe: 100%;  
    Breite: 30%;  
    Anzeige: Flex;  
    Inhalt ausrichten: zentriert;  
    Elemente ausrichten: zentrieren;  
    Farbe: #ffffff;  
} 

.Pfeil:schweben {  
    Cursor: Zeiger;  
} 

.Linkspfeil {  
    links: 0;  
} 

.vor-Pfeil {  
    Breite: 0px;  
    Höhe: 0px;  
    Rahmenbreite: 30px;  
    Rahmenstil: durchgezogen;  
    Rahmenfarbe: transparent #51D15B transparent transparent;  
} 

.Rechtspfeil {  
    rechts: 0;  
} 

.nach-Pfeil{  
     Breite: 0px;  
    Höhe: 0px;  
    Rahmenbreite: 30px;  
    Rahmenstil: durchgezogen;  
    Rahmenfarbe: transparent transparent transparent #51D15B;   
} 

.Bildkarussell img {  
    Breite: 80px;  
    Höhe: 80px;  
    Übergang: alle 0,2 s linear;  
    -moz-transition: alle 0,2 s Auslaufen;  
    -webkit-transition: alle 0,2 s Auslaufzeit;  
    -o-Übergang: alle 0,2 s Auslaufen;  
} 

.img-Einstellung {  
    Rand: 0px -15px;  
} 

.p1 {  
    transformieren: Skalierung (0,6);  
    Z-Index: 1;  
} 

.p1:hover {  
    transformieren: Skalierung (0,8);  
} 

.p2 {  
    transformieren: Skalierung (0,8);  
    Z-Index: 2;  
} 

.p2:hover {  
    transformieren: Skalierung(1);  
} 

.p3 {  
    transformieren: Skalierung(1);  
    Z-Index: 3;  
} 

.p3:hover {  
    transformieren: Skalierung (1,2);  
} 


/*Benutzername*/ 

.name-box {  
    Anzeige: Flex;  
    Inhalt ausrichten: zentriert;  
    Rand: 1px durchgezogen #51D15B;  
} 

.name-box .benutzername {  
    Breite: 100 %;  
    Textausrichtung: zentriert;  
    Polsterung: 10px;  
    Umrissfarbe: #42A855;  
    Rand: keiner;  
    Schriftgröße: 16px;  
} 

/* Anmeldeschaltfläche */
.button-box{
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Rand: 10px 0 20px;
}

.button-box .login-button{
    Breite: 100 %;
    Polsterung: 10px 20px;
    Umriss: keiner;
    Rand: keiner;
    Hintergrund: #42A855;
    Farbe: weiß;
    Schriftgröße: 16px;
}

/* Fehlermeldung*/
.Fehlerbox{
    Farbe: #42A855;
    Rand: 2px durchgezogen #42A855;
    Rand oben: transparent;
    Rahmen links: transparent;
    Rand rechts: transparent;
}

.error-box span{
    Sichtbarkeit: versteckt;
    Farbe: #d43f3a;
    Schriftgröße: 14px;
}

login.js

// Wird zum Speichern der Reihenfolge der Bilder verwendet var imgArray = ['1','2','3','4','5'];

// Pfeil abrufen var leftArrow = document.getElementsByClassName('left-arrow')[0];
var rightArrow = document.getElementsByClassName('Rechtspfeil')[0];

// Benutzernamen abrufen var userName = document.getElementsByClassName('user-name')[0];

// Anmelde-Button abrufen var loginButton = document.getElementsByClassName('login-button')[0];

// Fehlermeldungsleiste abrufen var errorMessage = document.getElementsByClassName('error-message')[0];

// Listener-Ereignis für linken Pfeil hinzufügen leftArrow.addEventListener('click',function(){
    imgArray.unshift(imgArray[imgArray.length - 1]); // Füge ein Element am Anfang des Arrays hinzu //  
    imgArray.pop(); // Löschen und das letzte Element des Arrays zurückgeben carouselImg(); // Bilder wechseln });

// Listener-Ereignis für Rechtspfeil hinzufügen rightArrow.addEventListener('click',function(){
    imgArray.push(imgArray[0]); // Setze das erste Element ans Ende imgArray.shift(); // Lösche und gib das erste Element des Arrays zurück carouselImg(); // Bilder wechseln });

// Bilder wechseln Funktion carouselImg(){
    für(var Anzahl = 0; Anzahl < imgArray.Länge; Anzahl++){
        document.getElementsByTagName('img')[Anzahl].src = './img/' + imgArray[Anzahl] + '.jpg';
        document.getElementsByTagName('img')[Anzahl].alt=imgArray[Anzahl] + '.jpg';
    }
}

// Listener-Ereignis für Anmeldeschaltfläche hinzufügen loginButton.addEventListener('click',function(){
    wenn(Benutzername.Wert === ''){
        errorMessage.innerHTML = „Bitte geben Sie Ihren Namen ein“;
        errorMessage.style.visibility = "sichtbar";
    }sonst wenn(Benutzername.Wert.Länge > 8){
        errorMessage.innerHTML = „Ihr Name darf nicht mehr als 8 Wörter enthalten“;
        errorMessage.style.visibility = "sichtbar";
    }anders{
        window.location.href=encodeURI('index.html?selectpicture=' + document.getElementsByClassName('p3')[0].alt + 
                                    '&Benutzername=' + Benutzername.Wert);
    }
});

// Geben Sie die Tastenkombination für das Login-Ereignis ein. document.onkeydown = function (event) {  
    var e = Ereignis || Fenster.Ereignis;  
    wenn(e && e.keyCode === 13){
        loginButton.click();
    }
};

Hauptseite

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <title>Chatraum</title>
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
    <link rel="stylesheet" href="./css/index.css" />
</Kopf>
<Text>
    <div Klasse="Chatbox">
        <!-- Chatbox-Überschrift-->
        <div Klasse="Chat-Header">
            <div Klasse="Schaltflächenfeld">
                <input type="button" class="log-out" value="ABMELDEN" />
            </div>
        </div>
        <!-- Chatbox-Text-->
        <div Klasse="Chat-Body">
            <!-- Linke Seite des Chatfensters -->
            <div Klasse="Chat-Body-Links">
                <!-- Chat-Inhalt auf der linken Seite des Chat-Fensters-->
                <div Klasse="Chat-Inhalt"></div>
                <!-- Chat-Eingabefeld auf der linken Seite des Chat-Fensters-->
                <div Klasse="Chat-Bearbeiten">
                    <input type="text" class="edit-box" placeholder="Bitte geben Sie Ihre Nachricht ein" maxlength="15"/>
                    <input type="button" class="edit-button" value="SENDEN" />
                </div>
            </div>
            <!-- Rechte Seite des Chatfensters -->
            <div Klasse="Chat-Body-Rechts">
                <!-- Zählen Sie die Anzahl der Personen auf der rechten Seite des Chatfensters-->
                <div class="online-count">Online:0</div>
                <!-- Benutzername auf der rechten Seite des Chatfensters -->
                <div class="user-name">Benutzername</div>
                <!-- Avatar auf der rechten Seite des Chatfensters-->
                <img Klasse="Benutzer-img" />
            </div>
        </div>
    </div>
</body>
</html>

<script src="./js/socket.io.js"></script>
<script src="./js/index.js"></script>

index.css

*{
    Rand: 0;
    Polsterung: 0;
    Schriftfamilie: „Microsoft Yahei“
}
html,Text{
    Breite: 100 %;
    Höhe: 100%;
}

/* Hintergrundfarbe */
Körper{
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Hintergrund: linearer Farbverlauf (-135 Grad, Nr. 51D15B, Nr. 42A855);
    Hintergrund: -moz-linear-gradient(-135deg,#51D15B,#42A855);
    Hintergrund: -webkit-linear-gradient(-135 Grad,#51D15B,#42A855);
    Hintergrund: -o-linear-gradient(-135deg,#51D15B,#42A855);
}

/* Äußerste Schicht */
.chat-box{
    Breite: 50%;
    maximale Breite: 720px;
    Mindestbreite: 400px;
    Höhe: 80%;
    Mindesthöhe: 530px;
    maximale Höhe: 530px;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Hintergrund: #fff;
    Kastenschatten: 1px 1px 15px #333;
}

/* Kopfzeile */
.chat-header{
    Rand: 5px;
    Kastenschatten: 1px 1px 15px #7B8C99;
}

.button-box{
    Anzeige: Flex;
    Inhalt ausrichten: Flex-Ende;
}

.Abmelden{
    Höhe: 100%;
    Schriftgröße: 14px;
    Schriftstärke: fett;
    Polsterung: 5px 15px;
    Farbe: #79C2EA;
    Hintergrund: #fff;
    Gliederung: keine;
    Rand: keiner;
    Rahmenradius: 15px;
    Cursor: Zeiger;
}

/* Körper */
.chat-body{
    Höhe: 90%;
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Rand: 5px;
    Polsterung: 5px;
}

/* Linke Körperseite */
.chat-body-left{
    Höhe: 100%;
    Breite: 70%;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Abstand herum;
    Rand: 5px;
}

/* Inhalt links */
.chat-inhalt{
    Kastenschatten: 1px 1px 15px #7B8C99;
    Höhe: 100%;
    Rand unten: 5px;
    Überlauf: scrollen;
}

/*Chatblase*/ 

.meine-Nachrichtenbox {  
    Anzeige: Flex;  
    Inhalt ausrichten: Flex-Ende;  
    Inhalt ausrichten: zentriert;  
    Rand: 5px;  
} 

.andere-message-box {  
    Anzeige: Flex;  
    Inhalt ausrichten: Flex-Start;  
    Inhalt ausrichten: zentriert;  
    Rand: 5px;  
} 

.Nachrichteninhalt {  
    Anzeige: Flex;  
    Inhalt ausrichten: zentriert;
    Inhalt ausrichten: zentriert;
    Hintergrundfarbe: #51D15B;  
    Polsterung: 5px 10px;
    Rahmenradius: 15px;  
    Farbe: #fff;  
} 

.anderer-Nachrichteninhalt{
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Inhalt ausrichten: zentriert;
    Hintergrundfarbe: #79C2EA;
    Polsterung: 5px 10px;
    Rahmenradius: 15px;
    Farbe: #fff;
}

.message-content span{
    Polsterung: 20px 0px;
}

.Benutzer-Chat-Img {  
    Breite: 50px;  
    Höhe: 50px;  
} 

.anderer-message-content span{
    Polsterung: 20px 0px;
}

.Nachrichtenpfeil{
    Breite: 0;
    Höhe: 0;
    Rahmenbreite: 8px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent transparent #51D15B;
    selbst ausrichten: zentrieren;
}

.anderer-message-arrow{
    Breite: 0;
    Höhe: 0;
    Rahmenbreite: 8px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent #79C2EA transparent transparent;
    selbst ausrichten: zentrieren;
}

.Benutzerinformationen{
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Flex-Ende;
}
.andere-Benutzerinformationen{
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Flex-Ende;
}

.Benutzer-Chat-Name{
    Farbe: #333;
    Schriftgröße: 16px;
    Textausrichtung: zentriert;
}

/* Chat-Eingabefeld*/
.chat-bearbeiten{
    Rand oben: 5px;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Elemente ausrichten: zentrieren;
    Kastenschatten: 1px 1px 15px #7B8C99;
    Überlauf: versteckt;
}

/* Eingabebereich für Chat-Eingabefeld*/
.edit-box{
    Breite: 80%;
    Höhe: 100%;
    Rand: 5px;
    Rand: keiner;
    Gliederung: keine;
}

/* Schaltfläche für das Chat-Eingabefeld*/
.Bearbeiten-Schaltfläche{
    Höhe: 100%;
    Polsterung: 5px 15px;
    Hintergrund: #fff;
    Farbe: #79C2EA;
    Gliederung: keine;
    Rand: keiner;
    Rahmenradius: 15px;
    Cursor: Zeiger;
    Schriftgröße: 14px;
    Schriftstärke: fett;
}

/* Rechte Körperseite */
.chat-body-rechts
    Höhe: 100%;
    Breite: 30%;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Rand: 5px;
    Kastenschatten: 1px 1px 15px #7B8C99;
}

.Benutzername{
    Rand: 15px;
    Schriftgröße: 18px;
    Schriftstärke: fett;
    Farbe: #79C2EA;
}

.Benutzer-Img{
    Breite: 100px;
    Höhe: 100px;
    Rand: 5px;
}

.online-Anzahl{
    Schriftgröße: 18px;
    Schriftstärke: fett;
    Farbe: #79C2EA;
}

/* Kompatibel mit kleinen Bildschirmen */
@media screen und (max-width:420px) {
    .chat-box{
        Breite: 50%;
        maximale Breite: 720px;
        Mindestbreite: 300px;
        Höhe: 80%;
        Mindesthöhe: 530px;
        maximale Höhe: 530px;
    }
    .chat-body-left{
        Höhe: 100%;
        Breite: 100 %;
        Anzeige: Flex;
        Flex-Richtung: Spalte;
        Inhalt ausrichten: Abstand herum;
        Rand: 5px;
    }
    .chat-body-rechts
        Anzeige: keine;
    }
}

index.js

// Inhalt der URL abrufen var url = decodeURI(location.href).split('?')[1].split('&'); //..Das erste Element des Arrays ist der Bildpfad und das zweite Element der Benutzername console.log(url);

// Chat-Inhaltsfeld abrufen var chatContent = document.getElementsByClassName('chat-content')[0];

// Chat-Eingabefeld abrufen var editBox = document.getElementsByClassName('edit-box')[0];

// Holen Sie sich die Schaltfläche „Senden“ im Chat-Eingabefeld var editButton = document.getElementsByClassName('edit-button')[0];

// Holen Sie sich die Spalte mit dem Benutzernamen var userName = document.getElementsByClassName('user-name')[0];

// Spalte „Anzahl der Online-Personen abrufen“ var onlineCount = document.getElementsByClassName('online-count')[0];

// Der Name der Login-Seite steht rechts userName.innerHTML = url[1].split('=')[1];
var userImg = document.getElementsByClassName('user-img')[0];

// Platziere den Avatar der Anmeldeseite rechts userImg.src = `./img/${url[0].split('=')[1]}`;
var logOut = document.getElementsByClassName('abmelden')[0];

// Schaltfläche zum Binden des Klickereignisses senden editButton.addEventListener('click',sendMessage);

// Abmelden-Schaltfläche bindet Klickereignis logOut.addEventListener('click',closePage);

// Eingabetaste binden und Ereignisse senden document.onkeydown = function(event){
    var e = Ereignis || Fenster.Ereignis;
    wenn(e && e.keyCode === 13){
        wenn(editBox.value !== ''){
            editButton.klick();
        }
    }
};

//Schließe die Seite Funktion closePage(){
    var userAgent = navigator.userAgent;
    console.log(`userAgent=${userAgent}`);

    if(userAgent.indexOf('Firefox') != -1 || userAgent.indexOf("Chrome") != -1){ //..wenn es Firefox oder Google ist window.location.href = "about:blank";
    }anders{
        Fensteröffner = null;
        Fenster öffnen("","_self");
        fenster.schließen();
    }
}

// Socket-Teil var socket = io();

// Eine Chat-Blase generieren, wenn eine Nachricht empfangen wird und diese nicht lokal ist socket.on('message',function(information){
    console.log('Empfangene Nachricht',Information);
    if(information.name !== userName.textContent){ // Nicht lokal createOtherMessage(information); // Eine Chat-Blase generieren}
});

// Wenn sich jemand mit dem Socket verbindet, socket.on('connected', function(onlinecount) {
    console.log(`Jemand ist angemeldet, die Anzahl der Personen online beträgt: ${onlinecount}`);
    onlineCount.innerHTML = 'Online:' + onlinecount;
});

// Beim Empfang einer Verbindungsunterbrechung, socket.on('disconnected', function(onlinecount){
    console.log(`Jemand hat die Verbindung getrennt: Aktuelle Anzahl der Personen: ${onlinecount}`);
    onlineCount.innerHTML = 'Online:' + onlinecount;
});

//Sende die lokale Nachricht Funktion sendMessage(){
    if(editBox.value != ''){ //..wenn der gesendete Inhalt nicht leer ist var myInformation = {
            Name: Benutzername.Textinhalt,
            Chatinhalt: editBox.value,
            img: BenutzerBild.src
        };
        socket.emit('Nachricht',meineInformation);
        createMyMessage(); // Eine native Chat-Blase erstellen editBox.value = ''; //..Textfeld löschen}
}

//Erstelle eine Chat-Blase-Funktion createMyMessage(){
    var meineMessageBox = document.createElement('div');
    myMessageBox.className = "meine-Nachrichtenbox";

    var Nachrichteninhalt = document.createElement('div');
    messageContent.className = 'Nachrichteninhalt';
    var text = document.createElement('span');
    text.innerHTML = editBox.Wert;
    messageContent.appendChild(text);
    meineMessageBox.appendChild(messageContent);

    var Pfeil = document.createElement('div');
    Pfeil.Klassenname = "Nachrichtenpfeil";
    meineMessageBox.appendChild(Pfeil);

    var Benutzerinformation = document.createElement('div');
    userInformation.className = 'Benutzerinformationen';
    var userChatImg = document.createElement('img');
    userChatImg.className = "Benutzer-Chat-Img";
    userChatImg.src = userImg.src;
    var userChatName = document.createElement('div');
    userChatName.className = 'Benutzer-Chat-Name';
    userChatName.innerHTML= BenutzerName.textinhalt;
    Benutzerinformation.appendChild(BenutzerChatBild);
    Benutzerinformation.appendChild(Benutzer-Chatname);
    meineMessageBox.appendChild(Benutzerinformation);

    chatContent.appendChild(meineMessageBox);

    chatContent.scrollTop = chatContent.scrollHeight; // Zum neuesten Chat-Inhalt scrollen}

// Chatblasen für andere Benutzer generieren function createOtherMessage(information) {  
    var andereMessageBox = document.createElement('div');  
    otherMessageBox.className = "andere-Nachrichtenbox"; 

    var andereBenutzerinformation = document.createElement('div');  
    otherUserInformation.className = 'andere Benutzerinformationen';  
    var userChatImg = document.createElement('img');  
    userChatImg.className = "Benutzer-Chat-Img";  
    userChatImg.src = information.img;  
    var userChatName = document.createElement('span');  
    userChatName.className = 'Benutzer-Chat-Name';  
    userChatName.innerHTML = information.name;  
    andereBenutzerinformation.appendChild(userChatImg);  
    andereBenutzerinformation.appendChild(Benutzer-Chatname);  
    otherMessageBox.appendChild(andereBenutzerinformation); 

    var otherMessageArrow = document.createElement('div');  
    otherMessageArrow.className = "anderer-Nachrichtenpfeil";  
    otherMessageBox.appendChild(andererMessageArrow); 

    var andererMessageContent = document.createElement('div');  
    otherMessageContent.className = "anderer Nachrichteninhalt";  
    var text = document.createElement('span');  
    text.innerHTML = information.chatinhalt;  
    andererNachrichteninhalt.appendChild(text);  
    andereMessageBox.appendChild(andererMessageContent); 

    chatContent.appendChild(andereMessageBox); 

    chatContent.scrollTop = chatContent.scrollHeight;  
}

server.js

// Import muss mehrdeutig sein var express = require('express');
var app = express();
var http = erfordern('http').Server(App);
var io = erfordern('socket.io')(http);
var Pfad = erforderlich('Pfad');

// Online-Zahlenstatistik var onlineCount = 0;
app.use(express.static(__dirname));

// Pfadzuordnung app.get('/login.html',function(request,response){
    Antwort.sendFile('login.html');
});

// Wenn ein Benutzer eine Verbindung herstellt, io.on('connection',function(socket){
    console.log('ein Benutzer hat sich verbunden');

    //Sende die Anzahl der Online-Benutzer an den Client io.emit('connected',++onlineCount);

    // Wenn ein Benutzer die Verbindung trennt socket.on('disconnect',function(){

            console.log('Benutzer getrennt');

            //An die Anzahl der Clients senden io.emit('disconnected',--onlineCount);
            console.log(onlineAnzahl);
    });

    // Nachricht vom Client empfangen socket.on('message',function(message){
        //Senden Sie eine Nachricht an die Client-Konsole.log('Die vom Server empfangene Nachricht lautet:',message);
        io.emit('Nachricht',Nachricht);
    });
});

var server = http.listen(4000,function(){
    console.log('Server läuft');
});

endlich

Terminal-Eingang

Knotenserver.js

Geben Sie die Adressleiste des Browsers ein

http://localhost:4000/login.html

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der wichtigsten Punkte der Python Socket-Programmierung
  • Websocket+Vuex implementiert eine Echtzeit-Chat-Software
  • Java Socket zur Implementierung eines Chatsystems für mehrere Personen
  • Springboot Websocket Stomp Nachrichtenabonnement-Push
  • Java Socket-Simulation zur Realisierung eines Chatrooms
  • C++ implementiert Netzwerk-Chatrooms basierend auf Socket-Multithreading
  • Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket
  • Erläuterung des Anwendungsfalls für Socketpaare in der C-Sprache

<<:  Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.16 Win10-Zip-Version

>>:  Implementierung eines Docker-Cross-Host-Netzwerks (Overlay)

Artikel empfehlen

Lassen Sie uns über die Speicher-Engine in MySQL sprechen

Grundlagen In einer relationalen Datenbank entspr...

Sprechen Sie darüber, wie HTML-Escapezeichen durch Code identifiziert werden können.

Gelegentlich werden Sie in den Daten Zeichen wie ...

Was ist JavaScript Anti-Shake und Throttling

Inhaltsverzeichnis 1. Funktion Entprellung 1. Was...

Implementierung des Deployment-War-Package-Projekts mit Docker

Um War mit Docker bereitzustellen, müssen Sie ein...

Lassen Sie uns ausführlich über Vues Mixin und Vererbung sprechen

Inhaltsverzeichnis Vorwort Mischen Mixin-Hinweis ...

Apropos „Weniger und mehr“ im Webdesign (Bild)

„Weniger ist mehr“ ist ein Schlagwort vieler Desi...

Vue Element Front-End-Anwendungsentwicklung Konventionelle Element-Schnittstellenkomponenten

Inhaltsverzeichnis 1. Listenschnittstelle und and...

Tutorials der MySQL-Reihe für Anfänger

Inhaltsverzeichnis 1. Grundkonzepte und Grundbefe...

Lösung für die Baidu-Site-Suche, die https nicht unterstützt (getestet)

Seit kurzem ist https auch auf dem Handy möglich....

MySQL partitioniert vorhandene Tabellen in der Datentabelle

Inhaltsverzeichnis So funktioniert es Betriebsabl...

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter Ab 2.6.0 können Sie einen...

Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac

1. Werkzeuge Wir benötigen jetzt zwei Tools: MySQ...

Mysql implementiert Master-Slave-Konfiguration und Multi-Master-Multi-Slave-Konfiguration

Was wir jetzt simulieren, ist ein Master-Slave-Sy...

Über IE8-Kompatibilität: Erklärung des X-UA-Compatible-Attributs

Problembeschreibung: Code kopieren Der Code laute...

Ungewöhnliche, aber nützliche Tags in Xhtml

Xhtml hat viele Tags, die nicht häufig verwendet w...