1. Python技术站首页
  2. node js

Node.js用Socket.IO做聊天软件的实现示例

• node js
yizhihongxing

下面是针对“Node.js用Socket.IO做聊天软件的实现示例”的完整攻略：

简介

Socket.IO 是一个实时应用程序框架，它允许任意传输底层通信机制，同时向应用程序层提供了良好的抽象。该框架可广泛应用于实时应用程序（例如实时聊天，协作编辑等）。

如何在 Node.js 中使用 Socket.IO 实现聊天室？

步骤

以下是使用 Socket.IO 创建聊天应用程序的简要步骤。

  1. 安装 Node.js 和 NPM。

  2. 创建项目目录，并通过 npm 初始化命令它：

    bash
    mkdir socket-io-chat
    cd socket-io-chat
    npm init

  3. 安装 socket.io 和 express 包：

    bash
    npm install --save socket.io express

  4. 编写 server.js 文件，用于启动服务器和建立 Socket.IO 连接：

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

    const port = process.env.PORT || 3000;

    server.listen(port, () => {
    console.log(Server listening on port ${port});
    });

    app.use(express.static(__dirname + '/public'));

    io.on('connection', (socket) => {
    console.log('User connected');
    socket.on('disconnect', () => {
    console.log('User disconnected');
    });
    });
    ```

    这个文件完成了以下操作：

    • 创建 express 应用程序和 HTTP 服务器。
    • 使用 Socket.IO 初始化此服务器。
    • 将静态公共路径设置为 public 目录。
    • 监听连接事件，当用户连接到 Socket.IO 时执行。

  5. 在 public 目录下创建 index.html 文件，创建聊天应用程序的前端：

    html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Socket.IO Chat App</title>
    </head>
    <body>
    <ul id="messages"></ul>
    <form action="">
    <input id="message" autocomplete="off" /><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="main.js"></script>
    </body>
    </html>

    这个文件包含了以下要素：

    • 表单：Input 和提交按钮，用于发送消息。
    • 无序列表：用于呈现消息。
    • 脚本链接：用于在前端中加载 Socket.IO 库和主 JavaScript 文件。

  6. 在 public 目录下创建 main.js 文件，建立与 Socket.IO 的连接：

    ``` javascript
    const socket = io();
    const messages = document.getElementById('messages');
    const form = document.querySelector('form');
    const input = document.getElementById('message');

    form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
    }
    });

    socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    });
    ```

    该文件完成以下操作：

    • 建立与 Socket.IO 服务器的连接。
    • 获取和处理消息和表单元素，并在用户提交表单后发送消息。
    • 接收 chat message 事件，将消息呈现在无序列表中。

  7. 启动服务器：

    bash
    node server.js

  8. 打开浏览器，并输入 URL：http://localhost:3000。你会看到一个空白聊天室，可以向其中发送消息了。

示例说明

示例1：在服务器端添加昵称

你需要让用户设置昵称，将其附加到每个消息中，并在聊天室中显示。

为此，请使用以下代码修改 server.js：

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

    socket.on('new user', (name) => {
        console.log(`New user: ${name}`);
        socket.username = name;
    });

    socket.on('chat message', (msg) => {
        console.log(`Message received from ${socket.username}: ${msg}`);
        io.emit('chat message', `<strong>${socket.username}:</strong> ${msg}`);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

客户端代码：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = document.getElementById('message');

    if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
    }
});

socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.innerHTML = msg;
    messages.appendChild(item);
});

为了允许用户设置名称，您需要更改 form，并将名称作为参数发送到服务器：

<form action="">
  <input id="message" autocomplete="off" />
  <input id="name" autocomplete="off" placeholder="Name" />
  <button>Send</button>
</form>

然后，需在客户端代码的初始化期间向服务器发送此名称。

要在客户端代码中附加用户名，请将以下代码添加到 form 侦听器中：

const nameInput = document.getElementById('name');
socket.emit('new user', nameInput.value);

示例2：实现私聊功能

在聊天室中实现私聊功能，允许用户向其他用户发送私人消息，而不是在整个聊天室中广播消息。实现此功能需要以下步骤：

  1. 创建一个用于姓名的数组，用作“在哪里”的参考：

    javascript
    let users = [];

  2. 修改 new user 监听器以存储用户名，并在数组中添加它：

    `` javascript
    socket.on('new user', (name) => {
    console.log(    New user: ${name}`);
    socket.username = name;

    users.push(name);
io.emit('user list', users);

    });
    ```

  3. 在客户端发出“私聊”事件时，服务器应在其他用户上广播此事件：

    `` javascript
    socket.on('private message', ({ content, to }) => {
    const from = socket.username;
    console.log(    Private Message From ${from} to ${to}: ${content}`);

    const recipientSocket = io.sockets.sockets.find(
  s => s.username === to
);

if (recipientSocket) {
    recipientSocket.emit('private message', {
        content,
        from,
    });
}

    });
    ```

  4. 在客户端，为每个用户添加单击事件监听器，以允许它们单击特定的元素以与该用户进行通信。当此事件发生时，应生成“私聊”事件，将聊天内容和接收者的用户名传递给服务器。

客户端代码：

usersList.addEventListener('click', (e) => {
    if (e.target && e.target.nodeName === 'LI' && e.target.innerText != nameInput.value) {
        const to = e.target.innerText;
        const content = prompt(`Enter a private message to ${to}:`);
        socket.emit('private message', {
            content,
            to,
        });
    }
});

socket.on('private message', ({ content, from }) => {
    const item = document.createElement('li');
    item.innerHTML = `<i>${from} (Private): </i>${content}`;
    messages.appendChild(item);
});

还需添加HTML代码：

<h3>User List</h3>
<ul id="users"></ul>

请注意，通过删除或添加 HTML、CSS 或 JavaScript，可以定制聊天应用程序以满足您的需要。

以上就是 Node.js 与 Socket.IO 实现聊天室的完整攻略和两个示例，如果还有其他细节不理解的地方，欢迎在评论区留言提问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js用Socket.IO做聊天软件的实现示例 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • JavaScript的三座大山之单线程和异步

    JavaScript的三座大山之单线程和异步 在前端领域中，JavaScript的三座大山分别是：单线程和异步、闭包和作用域、this指向。本次我们来详细讲解其中的单线程和异步部分。 单线程指什么？ “单线程”并不是意味着JavaScript只能执行一行代码，而是指JavaScript引擎只有一个执行栈，也就意味着一次只能执行一条指令，即同一时间只能做一件事…

    node js 2023年6月8日
    00

  • koa-compose简单实现及使用的妙处

    我很乐意为您讲解“koa-compose简单实现及使用的妙处”的完整攻略。 什么是koa-compose？ koa-compose是一个用于Koa中间件的组合工具，它可以将多个中间件组合成一个中间件并且维护它们的顺序。koa-compose的作用类似于ES6中的Promise.all和Promise.race方法，只不过koa-compose是用于组合中间件…

    node js 2023年6月8日
    00

  • express框架下使用session的方法

    下面是关于express框架下使用session的方法的完整攻略。 Step 1：安装express-session模块 首先要在项目中安装一个express-session模块，以便在express框架下使用session。可以通过npm命令来安装： npm install express-session –save 其中–save参数是指将该模块安装…

    node js 2023年6月8日
    00

  • node.js中的fs.lstatSync方法使用说明

    来讲一下“node.js中的fs.lstatSync方法使用说明”的完整攻略。 简介 node.js中的fs模块提供了很多API用于文件系统操作，其中fs.lstatSync方法是以同步的方式检索文件或目录的基本信息的。lstatSync方法返回一个包含文件信息的对象，包括文件类型、大小、创建修改时间等等。 语法 const fs = require(‘fs…

    node js 2023年6月8日
    00

  • Javascript入门学习第六篇 js DOM编程第1/2页

    在这篇文章中，我们会学习Javascript中的DOM编程，DOM是指文档对象模型（Document Object Model），代表了HTML或XML文档的树形结构。使用DOM编程可以实现在页面中动态修改、添加或删除元素等效果。 DOM介绍 什么是DOM? DOM 是表示文档的方式，使得程序可以改变文档的内容、样式、或结构。 浏览器中的DOM 浏览器把 H…

    node js 2023年6月8日
    00

  • nodejs acl的用户权限管理详解

    Node.js ACL的用户权限管理详解 概述 在Node.js应用中，用户权限管理是非常重要的一个功能，其中一个常用的实现方式是使用 node_acl 模块。 node_acl 是一个封装了 redis 的简单的权限控制列表模块，在许多 Node.js 应用程序中都被广泛使用。 ACL 模块的核心思想是，在用户请求时，检查这个用户是否有权限执行特定的操作，…

    node js 2023年6月8日
    00

  • 使用JavaScript进行进制转换将字符串转换为十进制

    下面是使用JavaScript进行进制转换将字符串转换为十进制的完整攻略。 一、什么是进制转换？ 进制转换是将数字从一种进制表示形式转换为另一种进制表示形式的过程。例如，将二进制数转换为十进制数，将八进制数转换为十六进制数等。 二、如何使用JavaScript进行进制转换？ JavaScript内置了一些用于进制转换的函数，包括parseInt、parseF…

    node js 2023年6月8日
    00

  • 如何在Node和浏览器控制台中打印彩色文字

    对于Node和浏览器控制台来说，打印彩色文字是一个很有用的功能，可以用来组织和突出显示输出内容。下面是如何在Node和浏览器控制台中打印彩色文字的完整攻略： 在Node中打印彩色文字 在Node中打印彩色文字，可以使用chalk模块，这是一个广泛使用的颜色库，支持多种颜色格式和样式。 安装chalk模块 npm install chalk 在代码中引入cha…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部