数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在Node.js中使用Demo-Chat App配置Socket.IO？
Socket.io是一个流行的JavaScript库，允许我们在服务器和客户端之间进行通信。我们可以在客户端和服务器端创建一个socket.io实例，并监听或发出双方的事件。此外，我们可以监听服务器在多个Web客户端上发出的事件。
在实时应用中，我们可以使用socket.io库创建需要双向通信的聊天应用程序和在线游戏。例如，如果您在玩象棋或卢多游戏时观察到，它允许我们与对手交谈。
在本教程中，我们将学习如何在Node.js中使用socket.io配置一个演示聊天应用程序。
用户应按照以下步骤创建聊天应用程序。
步骤1 − 首先，我们需要创建一个Node项目。用户应在项目目录中执行以下命令。
npm init -y
步骤2 − 之后，我们需要通过在项目目录中执行以下命令来安装Node项目中的依赖项。
npm i express socket.io
步骤3 − 现在，执行以下命令在项目中创建空文件。
touch app.js index.html
用户现在可以观察到app.js和index.html文件已在项目目录中创建。
步骤4 − 接下来，我们将为Node应用程序创建一个服务器。
步骤4.1 − 首先，导入所需的依赖项，并初始化应用程序。
const app = express();
const { Server } = require("socket.io");
const server = http.createServer(app);
const io = new Server(server);
步骤4.2 − 配置路由并发送index.html文件。
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
步骤4.3 − 建立与客户端的连接。
io.on("connection", (socket) => {
});
步骤4.4 − 每当服务器端接收到“send name”事件时，它会再次从服务器发出该事件。因此，所有连接的客户端都可以接收事件和消息。
socket.on("send name", (username) => {
io.emit("send name", username);
});
步骤4.5 − 编写相同的代码来监听和发出“send message”事件。
步骤4.6 − 编写运行Node服务器的代码。
server.listen(port, () => {
console.log(`Server is listening at the port: ${port}`);
});
步骤5 − 我们已成功设置了Node服务器。现在，我们需要设置客户端。
步骤5.1 − 在index.html文件中，创建输入以获取名称和消息输入。另外，创建一个“发送”按钮。此外，设置HTML元素的样式以使其更具吸引力。
步骤5.2 − 在JavaScript中，初始化socket连接。
let socket = io();
步骤5.3 − 在按钮上添加点击事件。每当用户点击按钮时，访问名称和消息值，并发出“send name”和“send message”事件。
socket.emit('send name', myName.value);
socket.emit('send message', myMessage.value);
步骤5.4 − 每当我们在客户端监听“send message”或“send name”事件时，获取消息并将其附加到网页。
这里，我们提供了完整的代码示例。
示例
文件名 – Index.html
用户应复制以下代码并将其粘贴到项目的index.html文件中。在此文件中，我们获取输入值并使用名称和消息值发出事件。此外，我们在网页上显示消息时向div元素添加了一些样式。
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 300px;
margin: 5px auto;
padding: 10px;
font-size: 20px;
border: 3px solid blue;
border-radius: 10px;
}
button {
width: 100px;
margin: 5px auto;
padding: 10px;
font-size: 20px;
border: 3px solid blue;
border-radius: 10px;
background-color: aqua;
margin: 0 auto;
}
.message {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h2> Chat App using NodeJS and Socket.io </h2>
<!-- creating the input div elements -->
<div class = "message">
<input type = "text" id = "name" placeholder = "your name">
<br> <br>
<input type = "text" id = "message" placeholder = "your message">
<br> <br>
<button id = "send"> Send </button>
</div>
<br> <br> <br>
<div id="messageContent"> </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
// initialize the socket on client side
let socket = io();
// accessing the input elements
let myName = document.getElementById("name");
let myMessage = document.getElementById("message");
let executeSend = document.getElementById("send");
let messageContent = document.getElementById("messageContent");
// adding the click event listener to the send button
executeSend.addEventListener("click", (e) => {
e.preventDefault();
if (message.value) {
// emit the events
socket.emit('send name', myName.value);
socket.emit('send message', myMessage.value);
message.value = "";
}
});
//Embedding the name in the div element
socket.on("send name", (username) => {
let senderName = document.createElement("div");
senderName.style.width = "70%";
senderName.style.color = "green";
senderName.style.textAlign = "center";
senderName.style.backgroundColor = "aqua";
senderName.innerHTML = username + ":";
senderName.style.margin = "5px auto";
senderName.style.fontSize = "30px";
messageContent.appendChild(senderName);
});
// embedding the message in the div element
socket.on("send message", (chat) => {
let message = document.createElement("div");
message.style.width = "70%";
message.style.margin = "5px auto";
message.style.fontSize = "20px";
message.innerHTML = chat;
messageContent.appendChild(message);
});
</script>
</html>
文件名 – App.js
用户应复制以下代码并将其粘贴到app.js文件中。在此代码中，我们设置了Node服务器。此外，我们还使用socket将服务器与客户端连接起来。
// Import required libraries
const express = require("express");
const http = require("http");
// Initialize the app
const app = express();
const { Server } = require("socket.io");
// Create server using http
const server = http.createServer(app);
const io = new Server(server);
// send index.html file to the client
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
// Listen for the connection event with the client
io.on("connection", (socket) => {
socket.on("send name", (username) => {
io.emit("send name", username);
});
socket.on("send message", (chat) => {
io.emit("send message", chat);
});
});
// run the server on port 3000
const port = 3000;
server.listen(port, () => {
console.log(`Server is listening at the port: ${port}`);
});
用户可以在终端中执行以下命令来运行Node服务器。
node app.js
用户可以在两个不同的选项卡中打开https://:3000/ URL，并从一个选项卡发送消息。他们可以观察到第二个选项卡也会收到消息，因为它充当不同的客户端。
现在，让我们了解应用程序的流程。因此，每当我们在浏览器中打开https://:3000/ URL时，它都会显示一个index.html文件。当我们在输入值后点击发送按钮时，它会从一个客户端发出“send name”和“send message”事件，其中包含消息和名称的值。之后，服务器接收事件并再次发出相同的事件，以便将消息和名称发送到所有连接的客户端。
接下来，我们在每个客户端接收事件并在网页上显示消息。因此，我们需要首先向服务器发送消息才能向所有客户端发送消息。
222 次查看
