如何使用socket.io和Node.js创建聊天应用

Socket IO 是一个用于客户端和服务器之间双向通信的事件驱动框架。它主要用于像WhatsApp群聊一样向所有连接的客户端广播消息。这个框架是事件驱动的，意味着客户端和服务器将响应彼此发送的事件。在本文中，我们将看到如何使用socket.io和Node.js构建聊天应用。由于Node.js可以处理事件，socket.io在与Node.js的集成中起着重要的作用。

方法： 我们将为用户构建一个用于聊天的Web界面。我们将为用户提供文本框来提供他的名字和他想要发送的消息。然后，通过在Node.js中使用socket.io事件，我们将使用我们的服务器广播消息并在命令行或终端中显示它们。

设置项目：

步骤1： 我们将首先创建一个名为 socket-chat-app 的新文件夹。打开命令提示符并导航到刚创建的文件夹中。

mkdir socket-chat-app
cd socket-chat-app

步骤2： 现在，在终端中输入以下命令初始化节点包：

npm init -y

步骤3: 这将为我们创建一个 package.json 文件，以便我们可以安装必要的库。现在输入以下命令：

npm install express socket.io

步骤4： 现在，在 socket-chat-app 文件夹中，创建两个文件 – index.html 和 index.js：

touch index.html index.js

项目结构：

最后，您的文件夹结构应该如下所示：

如何使用socket.io和Node.js创建聊天应用

实现: 下面是使用socket.io和NodeJs创建实时聊天应用的上述方法的实现：

index.html: 在index.html中，我们简单地创建了一个带有两个输入框的表单。用户的姓名和他的消息。在script标签内，我们使用socket实例将用户消息发送到我们的express服务器，并且还监听来自服务器的传入事件，以在浏览器上显示用户名和消息。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Chat app using Socket IO and Node JS</title> 
    <script src="https://cdn.tailwindcss.com"></script> 
</head> 
  
<body> 
    <h1 class="font-bold text-green-500  
               text-3xl text-center mt-5"> 
          GeeksforGeeks 
      </h1> 
    <div> 
        <h2 class="font-semibold text-xl  
                   text-center mt-5"  
            id="logo"> 
              Chat App using Socket io 
          </h2> 
    </div> 
    <form class="flex flex-col justify-center  
                 items-center mt-5"  
          id="form"> 
        <input class="border border-gray-400  
                      rounded-md mt-5 p-1"  
               type="text" 
               placeholder="Name" 
               id="myname"> 
        <input class="border border-gray-400  
                      rounded-md mt-5 p-1"  
               type="text" 
               placeholder="Message" 
               id="message"> 
        <button class="bg-blue-500 rounded-md p-2  
                       text-white mt-5"> 
              Send 
          </button> 
    </form> 
    <div class="flex flex-col justify-center  
                items-center mt-5"  
         id="messageArea"> 
    </div> 
</body> 
<script src="/socket.io/socket.io.js"></script> 
<script> 
    let socket = io(); 
  
    let form = document.getElementById('form'); 
    let myname = document.getElementById('myname'); 
    let message = document.getElementById('message'); 
    let messageArea = document.getElementById("messageArea"); 
  
    form.addEventListener("submit", (e) => { 
        e.preventDefault(); 
  
        if (message.value) { 
            socket.emit('send name', myname.value); 
            socket.emit('send message', message.value); 
            message.value = ""; 
        } 
    }); 
  
    socket.on("send name", (username) => { 
        let name = document.createElement("p"); 
        name.style.backgroundColor = "grey"; 
        name.style.width = "100%"; 
        name.style.textAlign = "center"; 
        name.style.color = "white"; 
        name.textContent = username + ":"; 
        messageArea.appendChild(name); 
    }); 
  
    socket.on("send message", (chat) => { 
        let chatContent = document.createElement("p"); 
        chatContent.textContent = chat; 
        messageArea.appendChild(chatContent); 
    }); 
</script> 
  
</html>

index.js： 在index.js文件中，我们创建了一个express应用程序，并在服务器上提供我们的HTML文件。我们还创建了一个socket io实例，该实例侦听来自index.html的传入事件，并向index.html发出事件。

const express = require('express'); 
const app = express(); 
const { Server } = require('socket.io'); 
const http = require('http'); 
const server = http.createServer(app); 
const io = new Server(server); 
const port = 5000; 
  
app.get('/', (req, res) => { 
    res.sendFile(__dirname + '/index.html'); 
}); 
  
io.on('connection', (socket) => { 
    socket.on('send name', (username) => { 
        io.emit('send name', (username)); 
    }); 
  
    socket.on('send message', (chat) => { 
        io.emit('send message', (chat)); 
    }); 
}); 
  
server.listen(port, () => { 
    console.log(`Server is listening at the port: ${port}`); 
});