使用node.js和socket.io构建简单的实时聊天应用程序-DEV365 开发者社区

在当今快节奏的世界中，沟通比以往任何时候都重要。随着对与他人互动的快速简便方式的需求增加，实时聊天应用程序变得必不可少。但是，您是否曾经思考过这些应用程序的开发方式？所以，不再想知道！我将引导您完成本文中创建一个简单的实时聊天应用程序的过程，从而为您提供为轻松协作的平台开发的能力。

介绍

实时聊天应用程序是一种软件，允许通过网络或Internet在用户之间提示通信。此类应用程序利用Websocket或长纸技术来建立和维护客户端和服务器之间持续的双向通信渠道，从而可以实时发送和接收消息。客户在可用时发送并从服务器发送并从服务器接收数据，从而允许消息立即出现在用户的屏幕上。这与Web应用程序相反，Web应用程序客户向服务器提出请求并等待响应，然后再向用户显示数据。

开发实时聊天应用程序需要在Web开发的各个领域（包括前端和后端开发以及网络）熟练。了解特定技术和框架，例如node.js，socket.io和其他Websockets库，对于构建此类应用程序非常重要。实时聊天应用程序的常见示例是消息平台，例如Slack，WhatsApp和Facebook Messenger。

为什么选择node.js和socket.io？

node.js and socket.io提供许多好处，其中包括：

实时功能： socket.io是一个JavaScript库，支持客户和服务器之间的实时双向通信，从而使其成为理想的选择设计实时聊天应用程序。 socket.io使用引擎盖下的Webockets，可实现低延迟，实时数据传输。

可伸缩性： node.js设计为高度可扩展性，这意味着它可以同时处理大量的同时连接，而无需滞后或不反应，使其成为正确的选择用于构建支持数千甚至数百万用户的实时聊天应用程序。

跨平台兼容性： node.js作为编程语言与许多操作系统（包括Windows，Linux和MacOS）兼容。这意味着工程师可以一次编码并将其部署在多个平台上，从而使开发和维护各个设备和环境的实时聊天应用程序变得更加容易，更快。

设置项目

Node.js和NPM的安装

访问官方node.js网站。
在主页上下载用于操作系统（Windows，MacOS或Linux）的Node.js安装程序。
下载了安装程序后，运行并按照屏幕上的说明进行node.js和npm。
验证Node.js和npm已成功安装，打开命令提示符（Windows）或终端（MACOS或Linux），然后运行命令以检查已安装的Node.js版本。

node -v

然后键入

npm -v

检查已安装的NPM版本。

设置node.js项目

打开命令终端并导航到要创建新node.js项目的目录。
键入命令以初始化一个新的node.js project：

npm init

您将提示您输入有关项目的各种详细信息，例如项目名称，版本，描述等。
确保您遵循提示并输入所需的信息。如果您不确定给出的任何提示，您只需按Enter接受默认值。
输入所有必需的信息后，NPM将在您的项目目录中生成package.json文件。该文件将包含有关您的项目及其依赖项的信息，并由NPM用于管理您的项目依赖关系。

安装必要的依赖项

运行以下命令以安装软件包中列出的依赖项。

npm install

这将在项目目录中的node_modules文件夹中安装package.json文件中列出的依赖项。

如果要安装特定的依赖项，请运行以下命令：

npm install <package-name> - save

用要安装的软件包的名称替换。保存标志将把软件包添加到package.json文件中的项目依赖项。

开发聊天服务器

使用Express.js框架设置服务器

在命令提示符上运行命令

npm i express

这将使用NPM软件包管理器安装Express.js作为您项目的依赖。

现在，为您的服务器创建一个新的JavaScript文件，并将其命名。
使用以下代码在JavaScript文件的顶部需要Express.js模块：

const express = require('express');

通过调用express（）函数并将其分配给变量来实例化。

const app = express();

通过指定要处理的HTTP方法的端点，设置服务器上的路由，这包括GET，发布，PUT和DELETE方法。这是服务器根目录处的示例：

app.get('/', (req, res) => {
  res.send('Welcome!');
});

通过在Express应用程序实例上调用侦听方法来启动服务器，传递端口号3000â€您的服务器将作为参数聆听：

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

通过在终端或命令提示符中运行“ node”命令以及服务器文件的名称来运行服务器。例如，要运行保存在名为“ server.js”的文件中的服务器，您将键入node server.js。

一旦服务器启动并运行，您应该能够通过访问http://localhost:3000/''。

在服务器上设置socket.io

运行命令在项目目录中安装socket.io作为使用NPM软件包管理器的项目的依赖性。

npm install socket.io

通过以下代码要求它们在JavaScript文件的顶部，导入Express.js和socket.io模块。

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

在此，Express.js实例与HTTP Server实例包装，以创建一个可以处理WebSocket连接和常规HTTP请求的HTTP服务器。

为socket.io设置连接事件处理程序，该处理程序会在建立连接时倾听传入的插座连接并执行回调功能。

io.on('connection', (socket) => {
  console.log('Connected');
});

继续为您要在服务器端处理的不同事件（例如键入或消息）设置事件侦听器。向所有连接的客户发出事件，请使用io.emit（）方法，或者对特定客户端使用socket.emit（）方法。这是向所有已连接的客户发出消息事件的示例：

io.on('connection', (socket) => {
  console.log('Connected');

  socket.on('message', (data) => {
    console.log('Your Message: ', data);
    io.emit('message', data);
  });

});

通过在HTTP应用程序实例上调用侦听方法来启动服务器，传递端口号3000â€您的服务器将以参数聆听：

http.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在服务器上配置了socket.io后，您可以在事件的侦听器中使用套接字对象，以实时与已连接的客户端进行通信，根据需要发送和发送消息或数据。

为传入插座连接创建事件听众

使用io.on的方法建立一个连接事件处理程序，以聆听传入的插座连接。在io.on方法的回调函数中，可以使用socket.on方法创建您的事件听众。

io.on('connection', (socket) => {

  console.log('A user connected');

  socket.on('message', (data) => {
    console.log('Received message:', data);
  });

});

在此示例中，我们使用socket.on方法为新连接的客户端创建消息侦听器。每当客户端发出消息事件时，都会执行回调函数，然后将接收到的消息记录到控制台。

您可以在连接事件处理程序中创建多个事件侦听器，以处理客户的各种事件。客户端排放事件时，在服务器上执行相应的事件侦听器函数，使您可以实时处理事件并执行任何必要的操作。

使用套接字事件设置基本聊天功能

要使用socket.io事件设置基本聊天功能，您可以创建事件侦听器来处理发送消息，加入/离开房间和其他相关操作。

这是如何为这些动作创建事件听众的示例：

io.on('connection', (socket) => {
  console.log('A user connected');
  // Join a room
  socket.on('joinRoom', (room) => {

    console.log(`${socket.id} just joined room ${room}`);

    socket.join(room);

    io.to(room).emit('roomJoined', `${socket.id} just joined the room`);
  });

  // Leave a room
  socket.on('leaveRoom', (room) => {
    console.log(`${socket.id} has left room ${room}`);

    socket.leave(room);

    io.to(room).emit('roomLeft', `${socket.id} has left the room`);
  });


  // Post a message to a specific room
  socket.on('messageToRoom', (data) => {

    console.log(`${socket.id} posted a message to room ${data.room}: ${data.message}`);

    io.to(data.room).emit('message', {
      id: socket.id,
      message: data.message
    });

  });


  // Send a message to all connected clients
  socket.on('messageToAll', (data) => {
    console.log(`${socket.id} sent a message to all clients: ${data.message}`);

    io.emit('message', {
      id: socket.id,
      message: data.message
    });  

  });
  // Disconnect event
  socket.on('disconnect', () => {

    console.log(`${socket.id} disconnected`);

  });

});

在此示例中，我们创建了一个连接事件侦听器，该侦听器在建立新的套接字连接时将消息记录到控制台。我们还为各种操作创建了事件听众，在连接事件侦听器内部。

首先，我们创建事件听众来处理加入和离开房间。当客户发出一个活动活动时，我们使用插座。同样，当客户也发出leaveroom事件时，我们使用套接字。Leave方法将客户从指定的房间中删除，并向所有客户发出室内的活动房间。

接下来，我们初始化事件侦听器以有效地处理发送消息。当客户发出MessageToroom事件时，我们使用io.to方法向房间中的所有客户发出消息事件。我们还使用io.emit方法来向所有已连接的客户发出消息事件，每当客户发出MessageToAll的事件时。

最后，创建了一个事件侦听器来处理断开事件，当客户端与服务器断开连接时会发出。记录了一条消息，表明客户已断开时，发出此事件时。

创建聊天客户端

创建聊天客户端需要开发聊天应用程序的用户界面，该应用程序允许用户与服务器进行交互。这是此过程中涉及的步骤：

第一步是编写将通过socket.io连接到服务器的客户端JavaScript代码。这需要在您的HTML代码中集成socket.io客户端库并建立一个新的socket.io客户端实例：

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
</script>

加入聊天室：要加入聊天室，您将一个带有所需室ID的Joinroom活动发送给服务器``用户向同一房间中的其他客户提供了事件。

socket.emit('joinRoom', roomId);

发送消息：要发送消息，请在接收sendmessage事件时收听消息输入表单上的“提交事件”，然后向服务器发出sendmessage'事件，服务器将使用NewMessage事件将消息传播给同一房间的其他用户。

const messageForm = document.querySelector('#message-form');
messageForm.addEventListener('submit', (event) => {

  event.preventDefault();
  const messageInput = document.querySelector('#message-input');

  const message = {
    text: messageInput.value
  };

  socket.emit('sendMessage', message);
  messageInput.value = '';

});

接收消息：为了接收其他用户的消息，请在客户端上聆听“新事件”事件，并相应地更新UI：

socket.on('newMessage', (message) => {

  const messagesList = document.querySelector('#messages-list');

  const messageItem = document.createElement('li');

  messageItem.textContent = `${message.userId}: ${message.text}`;

  messagesList.appendChild(messageItem);

});

上面的此代码为每个消息提供了整个列表项目元素，并将其添加到聊天窗口中。

处理错误和边缘案例：最后，处理客户端代码中的错误和边缘案例，例如网络错误，断开连接和无效输入。聆听客户端上的断开事件，以检测何时丢失服务器连接并相应地更新UI：

socket.on('disconnect', () => {
  // Update UI to indicate that the user is disconnected
});

此外，在将用户输入发送到服务器之前验证用户输入并显示错误消息，如果输入无效。

使用socket.io连接聊天服务器

要在node.js应用程序中建立客户端socket.io连接，请按照以下步骤：

通过在项目目录中运行此命令，安装socket.io客户端库，这将在您的项目中下载并安装socket.io客户端库。

npm install socket.io-client

通过在HTML文件中加入以下行，将其安装后的socket.io客户端库加载在您的客户端JavaScript代码中，该文件将从服务器加载IT：

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

成功加载socket.io客户端库后，通过建立socket.io client实例并提供服务器URL来连接服务器，如下所示：

const socket = io('http://localhost:3000');

这将创建一个新的socket.io客户端实例，并尝试在提供的URL上连接到服务器。

使用套接字对象将事件发射到服务器上，一旦服务器建立了连接。例如，您可以向服务器加入活动，以加入聊天室：

socket.emit('joinRoom', roomId);

在这里，RoomID是一个变量，包含您要加入的聊天室的ID。

使用套接字对象从服务器中聆听事件。为了从服务器获取新的聊天消息，我们在此处收听新的事件：

socket.on('newMessage', (message) => {
  console.log(`Received message: ${message.text}`);
});

在这里，消息是一个包含从服务器收到的新聊天消息的变量。

为传入插座事件创建事件侦听器

要为Node.js聊天应用程序中的传入插座事件创建事件侦听器，您将需要在服务器端和客户端上使用socket.on（）方法。

创建用于传入事件的服务器端侦听器。例如，要从客户端接收新的聊天消息，例如，请听一个chatmessage事件，如以下代码：

socket.on('chatMessage', (message) => {

  console.log(`Received message: ${message.text}`);

  // Send the message to other users
  socket.broadcast.to(message.room).emit('newMessage', message);

});

在这里，插座是指传入的套接字连接，消息是一个变量，其中包含从客户端收到的新聊天消息。 console.log语句简单地将传入消息记录到服务器控制台。 socket.broadcast.to（message.room）.emit（）方法用于在同一聊天室中向所有其他客户端广播消息。

聆听与客户端上传入的“ Chatmessage”事件响应的服务器相同的新事件，如本代码中所示：

socket.on('newMessage', (message) => {

  console.log(`Received message: ${message.text}`);

  // Update the UI with the new message
  displayMessage(message);

});

在这里，套接字是指客户端套接字连接，消息是一个变量，其中包含从服务器接收到的新聊天消息，Console.log语句将传入消息记录到客户端控制台，而displayMessage（）函数是一种自定义功能，可在UI中显示新消息。

要将事件从客户端发送到服务器，请使用socket.emit（）方法。例如，要从客户端向服务器发送新的聊天消息，例如，发出包含消息数据的chatmessage事件，如本代码中所示：

socket.emit（'chatmessage'，{text：messageText，房间：roomid}）;
在这里，插座是指客户端套接字连接，MessageText是新聊天消息的文字。 RoomID是聊天室的ID，该聊天室应发送消息。

开发聊天功能的用户界面

这里有一些开始的步骤：

为您的聊天应用程序制作基本的HTML布局。这应该具有标题，聊天室显示区域，消息输入框以及在线用户列表。为了构建布局，您使用语义HTML标签，例如标题，主，部分，UL和Li。

通过包括CSS样式，使您的HTML布局在视觉上更具吸引力。使用CSS属性，例如背景色，边框，填充，字体大小和文本合格来自定义CHAT UI的外观。

使用javascript使用socket.io连接到聊天服务器。使用IO（）函数在客户端JavaScript代码中创建新的套接字连接。

创建事件侦听器来处理传入的插座事件。例如，要从服务器接收新的聊天消息，请收听新的事件，并相应地更新UI。您还可以收听“用户列表”活动以接收在线用户列表，并使用它更新UI。

使用JavaScript用新的聊天消息和用户在线状态刷新UI。还要使用DOMEN.CREATEELEMENT（），element.AppendChild（）和element.innerhtml之类的DOM MANIPULATION方法进行动态创建和更新HTML元素，以响应传入的插座事件。

最后，使用CSS样式聊天消息和在线用户列表。 CSS类和选择器也可用于将样式添加到HTML布局中的特定组件中。

这是如何在聊天UI中显示传入的聊天消息的一个示例：

function displayMessage(message) {
  const messageContainer = document.querySelector('#message-container');

  const messageElement = document.createElement('div');

  messageElement.classList.add('message');

  messageElement.innerHTML = `<span class="username">${message.username}: </span>${message.text}`;

  messageContainer.appendChild(messageElement);
}

在这里，消息是一个变量，其中包含从服务器接收的新聊天消息。 displayMessage（）函数将消息文本添加到带有类消息的新DIV元素中，并将其附加到HTML布局中的MessageContainer元素。

同样，这里是如何更新聊天中的在线用户列表的一个示例：

function updateUserList(users) {
  const userList = document.querySelector('#user-list');
  userList.innerHTML = '';
  users.forEach(user => {
    const userElement = document.createElement('li');
    userElement.textContent = user.username;
    userList.appendChild(userElement);
  });
}

在这里，用户是一个变量，它保留了从服务器接收到的最新在线用户列表。 updateUserList（）函数清除了HTML布局的现有用户列表，通过用户数组循环，为每个用户生成一个新的LI元素，并将其附加到UserList元素中。

添加新的聊天功能

我们使用socket.io的内置功能，并在客户端和服务器代码中添加一些自定义逻辑，以提供其他聊天功能，例如私人消息传递，消息历史记录和通知。这是一些这样的例子：

私人消息传递： 为了启用私人消息，我们在服务器上创建一个名为私人消息的新事件，该事件接收消息和收件人。在客户端时，创建一个用于发送私人消息的表单，该表格将私人消息事件与消息和收件人一起发送给服务器。

// Server-side code
socket.on('private message', function(msg, recipient) {
  // Send a private message to the recipient
});

// Client-side code
const recipient = 'user01';
const message = 'Good Morning';
socket.emit('private message', message, recipient);

显示消息历史记录： 在服务器上创建一个新事件，以显示消息历史记录称为聊天历史记录，该历史记录将聊天历史记录发送到客户端连接时。在客户端，创建一个为聊天历史记录事件倾听的函数，并使用以前的消息更新聊天UI。

// Server-side code
socket.on('connection', function() {
  // Send chat history to the connected client
  socket.emit('chat history', chatHistory);
});

// Client-side code
socket.on('chat history', function(history) {
  // Update chat UI with message history
});

启用通知： 创建一个新事件，以在服务器上发送名为“通知”通知，该通知向所有连接的客户端发送通知消息。在客户端时，创建一个为通知事件倾听并向用户显示通知消息的函数。

// Server-side code
function sendNotification(message) {
  // Push notification to all clients
  io.emit('notification', message);
}

// Client-side code
socket.on('notification', function(message) {
  // Display notification message to the user
});

通过实现这些其他聊天功能，我们可以使我们的实时聊天应用程序更有用和用户友好。

使用giphy来增强对话体验

外部API（例如Giphy）为聊天体验增添了更多的乐趣和互动性。这是我们如何将GIPHY API集成到我们的聊天应用程序中的一个示例：

首先，我们通过注册其开发人员计划从GIPHY获得一个API密钥。然后，我们使用Axios之类的库来根据用户输入向GIPHY API和获取GIF提出HTTP请求。

const apiKey = 'your_api_key_here';

const apiUrl = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}`;

function searchGifs(query) {
  return fetch(`${apiUrl}&q=${query}`)
  .then(response => response.json())
  .then(data => {
    const gifUrls = data.data.map(gif => gif.images.original.url);
    return gifUrls;
  });
}

在客户端，我们提供了一个输入字段，用户在其中搜索GIF并将所选GIF的消息发送到聊天。

<! - HTML code for the input field →
<input type="text" id="gif-search" placeholder="Search for a GIF">
<button id="gif-search-btn">Search</button>


// Client-side code for searching and sending GIFs
const searchInput = document.getElementById('gif-search');
const searchBtn = document.getElementById('gif-search-btn');
searchBtn.addEventListener('click', function() {
  const query = searchInput.value;
  searchGifs(query)
  .then(gifUrls => {
    // Select a GIF from the results
    const gifUrl = gifUrls[Math.floor(Math.random() * gifUrls.length)];
    // Send a message with the GIF to the chat
    const message = `<img src="${gifUrl}" alt="GIF"/>`;
    socket.emit('chat message', message);
    })
    .catch(error => {
    console.error(error);
  });
});

通过集成GIPHY API或其他外部API，我们为我们的聊天应用程序添加了更多引人入胜的功能，使其对用户更具吸引力和交互性。

结论

总而言之，实时聊天应用程序是一个在线应用程序，允许用户使用Node.js，Express.js和Socket.io通过文本消息实时实时进行实时互动。构建实时聊天应用程序可能是用户交谈同时学习和练习网络开发技能的一种有趣而动态的方式。

要创建一个实时聊天应用程序，我们必须首先使用express.js设置服务器，然后在服务器上配置socket.io，为传入的套接字连接创建事件侦听器，用套接字事件实现基本聊天功能，边缘案例，创建聊天客户端，并实现其他聊天功能，例如私人消息，消息历史记录和外部API，例如Giphy。