BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
BranchesTags

Latest commit

History

596 Commits

Folders and files

NameName
Last commit message
Last commit date
chatAdmin
chatAdmin
chatClient
chatClient
chatServer
chatServer
document
document
ts-server
ts-server
.gitignore
.gitignore
README.md
README.md

Repository files navigation

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

  • 登陆注册
  • 单聊
  • 群聊
  • 历史消息
  • 图片发送
  • 文件发送
  • 代码片段发送
  • 表情发送
  • 白板协作
  • 音视频聊天
  • 消息已读提醒
  • 好友分组
  • 好友备注
  • 好友上线提醒
  • 在线用户头像高亮
  • 添加好友
  • 添加群聊
  • 朋友圈功能
  • 发表朋友圈
  • 好友朋友圈
  • 朋友圈动态点赞
  • 朋友圈动态评论
  • 朋友圈动态回复评论
  • 日程设置

启动项目

1、克隆项目

git clone git@github.com:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天已读设置通知

3、朋友圈

朋友圈朋友圈评论

4、主题设置

主题

5、日程

日程新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

  • 客户端使用Vue、VueX、Vue-Router；
  • 管理员端使用React、antd；
  • 后端使用的是node.js；
  • 数据库使用的是MongoDB；
  • 在实现聊天的全双工数据通信使用的是WebSocket、socket.io。

项目打包

  1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
  2. 管理员端在chatAdmin的build目录下，需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html中引入资源路径前都加上/build。

交流

  • qq群

qq

  • E-mail：ccdebuging@gmail.com、cAuth1218@163.com
  • QQ：1831058205
  • 微信：cAutg9248

参考项目

About

聊天室、websocket、socket.io、毕业设计。

Topics

chatmongodbnodejsreactjssocket-iovuejswebsocket

Resources

Readme
Activity

Stars

907 stars

Watchers

11 watching

Forks

182 forks
Report repository

Releases

Packages

Used by

Contributors

Languages