Coder Social home page Coder Social logo

wildfirechat / vue-pc-chat Goto Github PK

View Code? Open in Web Editor NEW
127.0 4.0 124.0 423.48 MB

野火IM PC 客户端,支持Windows、MacOS,Linux,支持国产操作系统和国产CPU

License: Other

JavaScript 32.15% HTML 27.02% Vue 38.32% CSS 2.16% Python 0.30% Shell 0.04%
chat im vue-chat vue-im electron-chat electron-im

vue-pc-chat's Introduction

野火IM解决方案

野火IM是专业级即时通讯和实时音视频整体解决方案,由北京野火无限网络科技有限公司维护和支持。

主要特性有:私有部署安全可靠,性能强大,功能齐全,全平台支持,开源率高,部署运维简单,二次开发友好,方便与第三方系统对接或者嵌入现有系统中。详细情况请参考在线文档

主要包括一下项目:

GitHub仓库地址(主站) 码云仓库地址(镜像) 说明 备注
im-server im-server IM Server
android-chat android-chat 野火IM Android SDK源码和App源码 可以很方便地进行二次开发,或集成到现有应用当中
ios-chat ios-chat 野火IM iOS SDK源码和App源码 可以很方便地进行二次开发,或集成到现有应用当中
pc-chat pc-chat 基于Electron开发的PC 端
web-chat web-chat 野火IM Web 端, 体验地址
wx-chat wx-chat 小程序平台的Demo(支持微信、百度、阿里、字节、QQ 等小程序平台)
app server app server 应用服务端
robot_server robot_server 机器人服务端
push_server push_server 推送服务器
docs docs 野火IM相关文档,包含设计、概念、开发、使用说明,在线查看

野火IM Vue Electron Demo,演示如何将野火IM的能力集成到Vue Electron项目。

前置说明

  1. 本项目所使用的PC SDK是需要付费的,价格请参考费用详情
  2. PC SDK支持试用,具体请看试用说明
  3. 本项目默认只能连接到官方服务,购买或申请试用之后,替换PC SDK,即可连到自行部署的服务

分支说明

  1. master:基于Vue 3开发,是未来的开发重心
  2. vue2:基于Vue 2开发,进入维护模式,不在开发新功能,鉴于Vue 2已经终止支持且不再维护,建议客户升级到Vue 3版本

环境依赖

mac系统

  1. 最新版本的Xcode
  2. nodejs v18.19.0
  3. npm v10.2.3
  4. python 2.7.X
  5. git
  6. npm install -g [email protected]

windows系统

  1. nodejs v18.19.0
  2. python 2.7.X
  3. git
  4. npm 6.14.15
  5. npm install --global --vs2019 --production windows-build-tools
  6. npm install -g [email protected]

第5步安装windows开发环境的安装内容较多,如果网络情况不好可能需要等较长时间,选择早上网络较好时安装是个好的选择

linux系统

  1. nodejs v18.19.0
  2. python2.7X
  3. git
  4. binutils

开发

  1. npm config set electron_mirror https://repo.huaweicloud.com/electron/设置electron镜像,建议使用华为镜像,也可以使用其他镜像。
  2. npm ci,建议使用华为镜像npm ci --registry=https://mirrors.huaweicloud.com/repository/npm/
  3. npm run dev

注意避免使用cnpm,我们使用cnpm出现过一些奇怪问题的情况。如果您使用cnpm当遇到问题时请切换到npm试一下。另外代码路径中,不能有中文或者有空格,否则可能开发和打包过程中可能有问题。

vue-devtool 调试

  1. npm install -g vue-devtools
  2. 启动vue-devtools
  3. 根据第 2 步的提示,将script注入到public/index.htmlhead里面
  4. 项目目录下执行npm run dev

打包

打包为当前平台架构软件

npm run package

yarn

  1. yarn install --ignore-engines
  2. yarn run package

GitHub 在线打包

  1. fork 本仓库
  2. 新增、修改功能等
  3. 阅读.github/workflows/github-actions-package.yml里面的注释,并根据实际情况修改,比如是否打包Linux版本等
  4. 浏览器访问 GitHub fork后的仓库, actions -> 打包 vue-pc-chat -> run workflow -> 选择分支等 -> Run workflow,具体可以参考这儿

交叉打包

打包为其它平台架构软件

#打包windows系统amd64架构
npm run cross-package-win

#打包windows系统x86架构
npm run cross-package-win32

#打包linux系统amd64架构
npm run cross-package-linux

#打包linux系统arm64架构
npm run cross-package-linux-arm64

#打包mac系统
npm run cross-package-mac

Electron版本

目前master的使用的Electron版本是13.6.9。如果您使用的SDK是8的,请切换到分支electron_8 。旧版本将进入维护阶段不再添加新的功能,正在开发中的朋友们可以联系我们更新到最新SDK。SDK是跟版本无关的,如果您的应用是其他版本的Electron,也可以使用我们提供的SDK。

音视频

默认附带免费版本音视频,关于野火音视频可以参考野火音视频使用说明野火音视频简介。如果使用音视频高级版,请参考音视频高级版切换方法

常见开发问题

  1. 如何调试?PC使用了Electron,内嵌Chrome浏览器,跟在浏览器上开发调试是一样的。快捷键Ctrl +g(MAC下是CMD+g)打开开发者模式。

  2. 打包时,如果一直显示installing production dependencies platform=win32 arch=ia32 appDir=C:\<your path>\pc-chat\dist, 或者提示下载什么之类的,可将dep目录下对应平台的electron依赖,解压到对应的目录。

    // windows
    C:\Users\<你的用户名>\.electron-gyp
    // mac/linux
    ~/.electron-gyp
    
  3. 打包时,如果下载electron版本超时,可以国内的electron镜像。比如使用华为的electron镜像的命令是:npm config set electron_mirror https://mirrors.huaweicloud.com/electron/

  4. windows上需要严格按照环境进行安装,mac上环境比较简单一些,安装node和node-gyp就可以了 另外如果还有问题,请试试命令npm cache clean --force ,然后删掉node_modules,再重新在非管理员权限下npm ci --registry=https://mirrors.huaweicloud.com/repository/npm/

有些杀毒软件会对electron打包的软件报病毒,详情请参考electron报病毒 。安装时可能被杀毒软件限制安装,这时候可以让用户使用绿色免安装版(打包后release目录下的unpacked目录)。如果运行时报错,请在杀毒软件里加上例外。另外有条件的公司可以考虑去360官方或其他杀软的官方提交检测。

  1. ubuntu下,启动时,若提示,A JavaScript error occurred in the main process Uncaught Exception:Error: Cannot open /opt/wildfirechat/resources/app.asar/marswrapper.node: Error: libdouble-conversion.so.1: cannot open shared object file: No such file or directory ,可安装libdouble-conversion1 解决

  2. win平台野火客户端依赖Visual C++ Redistributable Package runtime。如果用户PC上没有安装就需要安装之后才能运行,请从微软官方下载安装 https://www.microsoft.com/zh-CN/download/details.aspx?id=48145 。注意这个安装包是有32位/64位区分的,需要安装对应架构的版本。

  3. MAC应用截屏时只能截屏空白桌面,无法截图窗口内容。这是因为没有通过mac系统的安全许可,在设置-》安全与隐私-》切换到隐私那个标签-》屏幕录制-》在野火IM PC应用前打勾,并重启应用。

  4. npm installUnexpected end of JSON input while parsing near...错误

    如果常见问题4解决不了,可以尝试  npm config set registry https://mirrors.huaweicloud.com/repository/npm/ ,然后在按常见问题4的步骤进行

  5. 音视频相关问题,请参考以下文档

    1. av readme
    2. 音视频常见问题
  6. 纯内网环境,不能显示表情

    1. src/assets/twemoji目录上传到一个内网能访问的服务器,比如部署app server的服务器
    2. 确保通过http(s)://base_twemoji_url/72x72/1f1e6.png能访问到对应表情,此处1f1e6.png蓝底白字大写字母A
    3. 修改config.js,将https://static.wildfirechat.net/twemoji/assets/ 替换成新部署的http(s)://base_twemoji_url/,需要注意,最后一个/不能省略
    4. 动态表情类似处理
  7. 想自己部署表情图片

    请常见问题11

  8. 一直提示:Electron failed to install correctly, please delete node_modules/electron and try installing again。见上面 使用国内Electron镜像 问题。

  9. windows 7 无法正常启动,显示黑屏或白屏

    1. background.js 里面找到下面代码,并取消//app.disableHardwareAcceleration();前面的注释
       // pls refer to: https://blog.csdn.net/youyudexiaowangzi/article/details/118676790
       // windows 7 下面,如果启动黑屏,请将下面注释打开
       //app.disableHardwareAcceleration();
    
  10. MAC打包的版本是Universal版本,可以同时支持x64架构和arm64架构。Universal版本比单架构版本要大一下,如果想要打包单架构的版本,可以把野火SDK瘦身到对应单一架构,然后打包对应平台。具体实现方法请自行查找。

  11. MAC系统要求签名才可以运行,有可能需要对野火的SDK重新签名才可以,签名的方法请网络搜索。

  12. Linux Arm64版本打包时,在linux+arm64的环境下打包deb格式的版本时会出问题,因为有个依赖软件fpm是x64架构的,必须在x64架构的机器下交叉打包,系统可以是windows/mac/linux都行(mac的arm64机器也可以,因为mac系统有rosetta可以运行x64软件)。

  13. 压力测试发现,Vue 内置的keep-alive组件,可能有缓慢的内存泄漏问题,可将HomePage.vue里面的keep-alive移除,由于activateddeactivated回调,要使用keep-alive组件才生效,需要妥善处理这两个回调里面的逻辑。

  14. 如果使用专业版IM服务且使用野火对象存储服务,需要使野火对象存储服务支持https,PC客户端和Web客户端需要使用HTTPS上传。

  15. 打包失败,提示Error in script "<stdin>" on line 75 -- aborting creation process

    系统的用户名是中文,或者项目放在中文路径下,会导致打包失败,请避免使用中文用户名或中文路径进行打包,可参考这儿

  16. Windows 打包失败,提示ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

    每次打包之前,打开任务管理器,查看是否有electron进程运行,必须全部杀掉才能正常打包。可参考github issue

截图

License

  1. Under the Creative Commons Attribution-NoDerivs 3.0 Unported license. See the LICENSE file for details.

vue-pc-chat's People

Contributors

heavyrain2012 avatar imhao183 avatar imndx avatar siqiii avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue-pc-chat's Issues

修改群昵称通知的问题

群组修改群昵称的通知现在是 Ttt修改群昵称为Ttt 。应该改为 贾浩(用户名)修改群昵称为Ttt(群昵称)

草稿光标问题

会话有草稿内容,点击会话,输入框内光标在草稿内容的起始位置,应该在草稿内容的后面

会话静音按钮错误

会话静音时,会话列表上的静音按钮不应该是个小喇叭,应该是个小喇叭加个斜杠

输入区光标的问题

在输入区输入内容后,按下回车键,先看到光标换到下一行,然后内容消失消息发出去光标回到第一行

pc端被踢的问题

pc端可以在另外pc上登录或者手机上点击退出,这之前如果有未读消息,托盘在一直闪动,退出后还在闪动,数字也没有清零。

野火号的显示

在联系人页面,应该显示野火号和昵称。点左上角自己的头像也应该显示野火号和昵称

消息不显示

打开一个会话,断网(或者电脑休眠),给这个会话发消息,等恢复网络,会话列表能够正确展示最后一条消息,但消息界面没有显示新的消息

会话列表

会话列表,用户名或群组名与时间没有上端对其,时间大概高了几个像素

搜索功能

搜索UI上,“search”应该显示中文,且光标和输入内容应该向左靠齐,点击esc按键应退出搜索功能。
功能上,不应该搜索新用户,另外需要添加群组和聊天内容的搜索

断网时状态不对

现象:应用正常登录,断开网络时,应用跳转到确认登录界面,等网络恢复,应用回到正常界面。
期待:断开网络,也应该在正常界面

联系人界面初次展示的问题

联系人有3个组,初次进入每个组都是闭合的,应该改成联系人打开状态。
另外新的朋友不需要把全部展示出来,可以只展示最近20个,或者其他固定数字个数

快速登录和自动登录

需要添加自动登录选项,在设置中添加选项,及在扫码登录界面下用户可以选择记住登录。当为true时,每次打开都自动登录,直到在菜单中选择登出或者取消自动登录。当为false时每次打开都要确认登录。

快速登录,如果不在自动登录状态,正常关闭已经登录的应用,下次打开展示上次登录用户信息,并可以点击按钮直接在手机上弹出登录请求。当在菜单中登出或切换账号,下次打开为扫码状态

标题栏拖动

现象:windows或linux平台下,选中会话后,拖动顶部标题栏,有时会无法拖动,可以多试几个会话就会发现无法拖动了
期待:所有会话都可以拖动到

@弹窗问题

问题描述:在群组内输入@,弹出群成员候选列表,方向上下键盘选择要@的用户,按下回车,消息直接发出去了
期待状态:按下回车,选择要@的用户,不能发送消息出去

搜索的问题

1,搜索框中应该有个🔍图标,包括主页面的搜索和创建群组的搜索。
2,第一次登录,点击搜索按钮,然后再点击下面空白页面,不能退出搜索,切换到联系人页面,就恢复正常。

输入框拖拽问题

现象:输入框可以拖拽更大,但不能拖拽的像微信一样小
期待:可以像微信一样,缩小到2/3行文字大小

打开文件的处理

打开图片/视频时能够在界面内展示,但无法另存为,打开所在路径,或者用系统自带工具打开,建议添加必要的选项。其它文件应该有类似处理

首次登录的问题

前提:有个会话是静音的,然后有多条未读消息
操作:在pc上登录,托盘显示未读数
分析:可能是跟协议栈同步有关系,先同步的消息,这时还没有同步会话静音状态,于是就展示了未读数。是不是可以在更新侧边栏信息badge数时更新托盘未读数

会话列表摘要问题

1,最后一条消息发送者是其他人时,需要显示为 发送者:内容摘要。
2,当有人@你或者@全体时,需要显示红色的提示 [有人@你]

文件的问题

1,侧边栏文件图标需要判断是不是专业版,只有专业版才支持。
2,点击侧边栏文件图标弹出窗口,选择聊天或者发送者,右侧的提示为“没有文件”,容易让人误会没有文件,需要更合适的提醒。
3,点击问题,提示下载,窗口焦点切换到主窗口了,需要焦点保持在文件窗口
4,添加菜单,可以收藏,如果是自己发送的可以删除

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.