huafua_chatroom
v1.0.0
Published
socket.io based chatroom.v2
Maintainers
huafuaReadme
基于 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至此，差不多就行了！