The chat room nodejs websocket

前端部分
<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        html,body{height:100%;}
        /* 聊天室 */
        main{height:100%; background: green; display: none;}
        main .header{
            height: 10%;
            background: #000;
            color: #fff;
            text-align: center;
        }
        main .header{display: flex;justify-content: center;align-items: center;}
        main .content{
            height: 80%;
            color:#fff;
        }
        main .footer{
            height: 10%;
            background: #fff;
        }
        main .footer{
            display: flex;
        }
        main .footer input{
            flex-grow: 1;
        }
        main .footer button{
            flex-basis: 50px;
        }
        /* 登录界面 */
        .login{padding: 30px;}
        .login p{line-height: 60px;}
        .login p input{height: 30px;}
    </style>
</head>

<body>

    <div class="login">
        <h3>用户登录</h3>
        <p>用户名：<input type="text" id="user"></p>
        <button type="button" id="login-btn">登录</button>
    </div>

    <main>
        <div class="header">
            <h2>同城聊天室</h2>
        </div>
        <div class="content"></div>
        <div class="footer">
            <input type="text">
            <button type = "button" id = "dest-btn"> transmission </ Button>
        </div>
    </ main> 

    <Script the src = "./ jquery.js"> </ Script> 
    <Script the src = "./ socket.io.js"> </ Script> 
    <Script> // establish connection websocket 
        let ws = io ( 'WS: // localhost: 555' )
         // for login button 
        $ ( "Login-BTN #") ON ( "the Click",. function () {
             // get the value of a user name input box 
            let user = $ ( "#user" ) .val ();
             // sends the user name to the backend 
            ws.emit ( 'Login' , user {}) 
        }) // Get message send button 
        $ ( "# dest-btn" ) on. ( "click",function Get input content
        
            
        () {
             // 
            the let $ Content = ( the this ) .siblings ( "INPUT" ) .val ()
             // sends the contents inputted to the rear end 
            ws.emit ( 'Content' , {Content}) 
            
        }) 

        ws.on ( "returnContent", (Data) => {
             // render the content region 
            $ (. "content"). the append ( `<P> data.content $ {} </ P>`)         }) // successful login when 
        ws.on ( 'Success', (Data) => { 
            Alert ($ {data.user} `welcome log`) 
            $ ( ".login" ) .hide (); 
            $ ( "main" ) the .Show () ;
        })


         
        ws.on ( 'add', (data) => { 
            $ ( '.content'). the append ( `<P> Welcome $ {data.user} enter the chat room! </ P>`)
         })
     </ Script> 
</ body> 

</ HTML> 
background section @ incorporated socket.io module creation server 
const = the require server ( "HTTP" ) .createServer (); 
the let IO = the require ( "socket.io" ) (server); // listen for connection events 
io.on ( 'connection', (WS) => {
 // defines whether a new user benchmark 
the let = in Flag to true ;
 // define an empty array, saving the user 
the let ARR = [];
 // monitor user login 
ws.on ( "login", (data ) =>{
 // If you are a new user if




 (Flag) {
 //Adding new users to the array 
arr.push (data.user)
 // Send a successful login to the browser 
ws.emit ( 'Success' , the Data)
 // broadcast 
io.sockets.emit ( 'the Add' , the Data) ; 
} 
// if it is not a new user 
for (the let I = 0; I <arr.length; I ++ ) {
 // if the array which has the username it is not the first landing 
IF (ARR [I] === data.user) { 
in Flag = to false ;
 BREAK ; 
} the else { 
in Flag = to true ; 
} 
} 
}) 
// intercepts transmitted user 
ws.on ( "content", (Data) =>{
 // the content broadcast reception 
io.sockets.emit ( 'returnContent' , Data) 
 
 
}) 
}) 


// listening port 
server.listen (555 ) 
the console.log ( 'server started successfully, ws: // localhost: 555 ' )
The chat room nodejs websocket

Guess you like
