快速了解 Electron:基于 Web 跨平台桌面实现 - 即时通讯

654 阅读2分钟

快速了解 Electron:基于 Web 跨平台桌面实现 - 即时通讯

Electron 知识普及

目前市面上的通讯软件多数都是支持多种平台的,Android 端、iOS 端、PC 端、Web 端、小程序端等。由于传统的 PC 端开发成本很高。所以今天给大家推荐使用 Electron 来实现 PC 端。

Electron 是通过将 Chromium 和 Node.js 合并到同一个运行时环境中,可以用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序。

Electron 可以将开发好的程序打包成 Mac、Windows 和 Linux 系统。

Electron 官网 https://www.electronjs.org/

Electron 开发 PC 端的理由

  1. 使用 Web 技术进行开发,开发成本低,可扩展性强;

  2. 跨平台,一套代码可打包为 Windows、Linux、Mac 三套软件;

  3. 可直接在现有 Web 应用上进行扩展;

  4. 提供浏览器不具备的能力;

实现即时通讯

传统 web 端通信多数都是由 websock 或者是长轮询实现的。目前市面上也有很多做即时通讯的三方,例如:融云,网易云等等。我选择的是融云。

融云提供了一个桌面端解决方案,是使用 Electron 实现。不过个人觉得那个版本有些低,但还是试用了下。

下载 Demo 启动起来,Demo 里面给的很简单不过基本的功能还是有的,把 Demo 中的地址换成了我自己的地址还是比较方便的。

此处省略了些实现过程,Electron 使用的是融云提供的 Demo, web 站点是之前集成的融云的 web 端 SDK。 如果大家想要了解可以先看下文档,由于项目中有很多其他模块内容就不再次展示了。

文档地址 docs.rongcloud.cn/v4/views/im…

由于我们场景就是单群聊,所以用到的核心接口如下。

  1. 初始化连接docs.rongcloud.cn/v4/views/im…

  2. 设置监听docs.rongcloud.cn/v4/views/im…

  3. 连接融云docs.rongcloud.cn/v4/views/im…

  4. 发消息docs.rongcloud.cn/v4/views/im…

当时测试时直接用的快速集成中的代码段进行了下修改。还是很方便的。如果需要大家可以自行查看。

结果上图

image