Huafua_chatroom NPM

基于 socket.io 的聊天室 V2

本小项目基于socket.io开发，结合express构建一个页面聊天系统，主要特点如下：

服务器端使用express包
数据库操作使用基于sqlite3的自定义的huafua_sqlite-db包
前后端分离，前端使用axios进行服务器请求,使用socket.io实现消息通讯
用户可群发或单独向某个人发送消息
有新用户接入、用户退出，服务器主动推送最新用户清单
在用户清单界面显示有来自谁的新消息，有几条
默认显示登录面板，点击登录显示聊天界面，注销后显示登录面板

需在其他项目是直接使用本项目中的聊天功能，参考如下test创建过程：

初始化项目
```
mkdir test
cd test
npm init -y
```

安装相关依赖

cnpm install -S express huafua_sqlite-db socket.io

引用本项目中的chatroom到test项目根目录，并在根目录创建存放静态文件目录www

创建app.js文件，代码如下

var http = require("http");
var path = require("path");
var express = require("express");
var chatroom = require("./chatroom.v2");
//var chatroom=require("huafua_chatroom");
var app = express();
app.use(express.static(path.resolve(__dirname, "www")));
var server = http.Server(app);
chatroom(server, app);
server.listen(8080);

在www目录中创建静态文件index.html,代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>聊天室</title>
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" type="text/css" href="/chatroom/index.css" />
    <script src="/chatroom/axios.min.js"></script>
    <script src="/chatroom/index.js"></script>
    <style>
      body {
        display: flex;
        position: absolute;
      }

      body div[class*="container"] {
        height: 600px;
        margin: 5px;
        flex: 1;
      }
    </style>
  </head>

  <body>
    <div class="container1"></div>
    <div class="container2"></div>
    <div class="container3"></div>
    <script>
      new Chatroom({
        containerSelector: ".container1",
        user: {
          id: "one",
          name: "一心一意"
        }
      });
      new Chatroom({
        containerSelector: ".container2",
        user: {
          id: "two",
          name: "双龙戏珠"
        }
      });
      new Chatroom({
        containerSelector: ".container3",
        user: {
          id: "three",
          name: "三顾茅庐"
        }
      });
    </script>
  </body>
</html>

启动服务器
```
node app.js
```
至此，差不多就行了！

huafua chatroom socket.io huafua_sqlite-db

huafua_sqlite-db socket.io

@everything-registry/sub-chunk-1873

1.0.0

4 years ago