使用Node.js的Readline和Socket.io实现实时聊天

要使用Node.js的Readline和Socket.io实现实时聊天,你需要按照以下步骤操作:

使用Node.js的Readline和Socket.io实现实时聊天
(图片来源网络,侵删)

1、安装依赖库

确保你已经安装了Node.js,在项目文件夹中运行以下命令来安装所需的依赖库:

npm init y
npm install express socket.io readline

2、创建服务器文件

创建一个名为server.js的文件,并在其中添加以下代码:


const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const readline = require('readline');
const app = express();
const server = http.createServer(app);
const io = socketIO(server);
// 创建readline接口
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});
// 监听客户端连接
io.on('connection', (socket) => {
  console.log('用户已连接');
  // 监听客户端发送的消息
  socket.on('message', (msg) => {
    console.log('收到消息: ' + msg);
    io.emit('message', msg);
  });
  // 监听客户端断开连接
  socket.on('disconnect', () => {
    console.log('用户已断开连接');
  });
});
// 监听readline输入
rl.on('line', (input) => {
  io.emit('message', input);
});
// 启动服务器
const port = 3000;
server.listen(port, () => {
  console.log(服务器正在监听端口${port});
});

3、创建客户端文件

创建一个名为client.html的文件,并在其中添加以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>实时聊天</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const messages = document.getElementById('messages');
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    // 监听服务器发送的消息
    socket.on('message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
    // 提交表单时发送消息
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit('message', input.value);
        input.value = '';
      }
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>发送</button>
  </form>
</body>
</html>

4、修改服务器代码以提供静态文件

server.js文件中,将以下代码添加到app.use()之前:

app.use(express.static('public'));

5、创建公共文件夹并移动客户端文件

在项目文件夹中创建一个名为public的文件夹,并将client.html文件移动到该文件夹中。

6、启动服务器

在命令行中运行以下命令启动服务器:

node server.js

7、访问聊天界面

在浏览器中访问http://localhost:3000,你将看到实时聊天界面,在多个浏览器窗口中打开该地址,你可以进行实时聊天。

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/483807.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
未希
上一篇 2024-04-17 04:29
下一篇 2024-04-17 04:31

相关推荐

  • c存储空间

    C语言中的存储空间分为代码段、数据段(包括全局变量、静态变量等)、堆和栈,用于存储程序的代码和数据。

    2025-02-19
    012
  • c例子linux

    Linux 是一个开源的操作系统,广泛用于服务器、桌面电脑和嵌入式系统。

    2025-02-19
    06
  • c执行js代码

    在C语言中,直接执行JavaScript代码并不是一个常见的操作。C语言用于系统编程和底层开发,而JavaScript主要用于网页开发和前端交互。如果你需要在C程序中执行JavaScript代码,可以使用一些嵌入的脚本引擎或库,如V8、Duktape等。使用Duktape库,你可以这样嵌入JavaScript代码:“c,#include “duktape.h”int main() {, duk_context *ctx = duk_create_heap_default();, if (!ctx) {, printf(“Failed to create a Duktape heap.\n”);, return -1;, } // Evaluate some JavaScript code, duk_eval_string(ctx, “print(‘Hello from JavaScript!’);”); // Clean up and exit, duk_destroy_heap(ctx);, return 0;,},“这段代码创建了一个Duktape上下文,并在其中执行了一段简单的JavaScript代码。

    2025-02-19
    07
  • c十点半游戏代码

    当然,以下是一段关于C++游戏代码的简答:“`cpp,#include,using namespace std;int main() {, cout

    2025-02-19
    07

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入