Nodejs分享：基于 node.js 和 react 开发的 web 聊天室

发布于 1周前 作者 caililin 来自 nodejs/Nestjs

Nodejs分享：基于 node.js 和 react 开发的 web 聊天室

预览: fiora.suisuijiang.com
源码: yinxin630/fiora

请使用较新的浏览器访问(最新版 chrome/safari/firefox/edge/QQ 浏览器都测试可行)
不支持影响式, 移动端页面是单独开发的, 仅支持 chrome 和 safari, 功能简陋(楼主太懒!一直拖更!)
以后会使用 react-native 开发双平台 app 的(你说了几个月了吧)

功能

  • 创建用户, 创建群组, 加入群组, 私聊, 群聊
  • 文本, 图片, 代码, url 等多种类型消息, 还有炸弹 /系统消息两种恶搞消息
  • 消息桌面通知, 声音提醒, 通知开关
  • 用户信息修改, 头像修改, 表情收藏, 群公告修改
  • 消息内容过滤, 消息长度限制, 消息发送频率限制
  • 提供第三方消息的实现接口, 炸弹和系统消息即依此实现(需要重新部署前端才能供其它用户使用)

技术栈

后端使用 koa 提供一个简易的 http 服务器, 并将所有路由定位到入口 index.html 处理. 使用 socket.io 前后端通讯, 后端 API 采用类似 Restful 风格的接口, 数据库是 MongoDB, 使用 bluebird 和 generator 处理异步, 用户认证采用 jwt token 的方式.

前端基于 react 框架, 资源大部分在 cdn 上(背景图打包进了 js 里), 使用 immutable 和 redux 处理数据, react-router 提供路由, 未使用第三方 UI 库, 页面样式均使用 sass 编写.


Harmonyos Next教程
13 回复

http://ci.baidu.com/43vVBVPMcJ 手机端惨不忍睹


什么浏览器, 你这个明显部分 css 没起作用

用的 UC 浏览器，，，，能请教个问题吗 ， 有关 nodejs 异步问题， 就是我要用 nodejs 做个签到和做任务的工具， 开头取 cookie 哪里没有问题， 就是执行任务， 哪里因为不止一个一个任务 ，原先我采用的是 for in 循环执行 ，因为我要把每个帐号完成的积分通过 socket.io 更新到前端 ，但是循环任务哪里 还没有全部执行完 Async 就提前 callback 进去下一环节 取积分返回 ，就想问问 有没有更好的办法 能让执行任务哪里全部做完才能进去下一环节， 嵌套 Async 可以？

不知道你是前端还是后端的异步问题, async 这个库我用的少, 估计你的用法是有问题的. 我写异步都是用 bulebrid+generator 的, 现在 node7 还可以直接用 async/await

QQ 方便贴一下嘛?

直接来聊天室嘛, QQ 贴代码贴链接啥的都不方便

。。。。。。。。。。。。。。。 不见你人啊

所有消息我肯定会看的. 周末忙于开车, 无心撸码.

更新 v1.1.2, 修复 bug, 炸弹可以炸没头像的新人了, 新加了 shit 消息, 有味道的聊天室.

可以，很强势，很有意思

能否提供 RDB 支持比如 mysql postgres

是支持 mysql 或者 postgres 数据库存储吗？

感谢分享关于使用 Node.js 和 React 开发 Web 聊天室的话题！这是一个非常实用且有趣的项目，涉及到前后端技术的结合。下面是一个简单的示例，展示如何使用 WebSocket 在 Node.js 后端和 React 前端之间实现实时通信。

Node.js 后端（使用 WebSocket）

首先，确保安装了 ws 库：

npm install ws

然后，创建一个简单的 WebSocket 服务器：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('New client connected');

  ws.on('message', message => {
    console.log(`Received: ${message}`);
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

React 前端

在 React 组件中，使用 reconnecting-websocket 库来处理 WebSocket 连接：

import React, { useState, useEffect } from 'react';
import ReconnectingWebSocket from 'reconnecting-websocket';

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const ws = new ReconnectingWebSocket('ws://localhost:8080');

  useEffect(() => {
    ws.onmessage = event => setMessages(prev => [...prev, event.data]);
  }, []);

  const sendMessage = () => {
    ws.send(input);
    setInput('');
  };

  // Render chat messages and input field...
};

以上代码只是一个基础示例，实际应用中需要处理更多细节，如用户身份验证、消息格式、错误处理等。

回到顶部