首页 » PHP笔记 » NW.js+GatewayWorker一步步搭建聊天室桌面客户端

NW.js+GatewayWorker一步步搭建聊天室桌面客户端

高蒙 2019/11/08 09:09 501浏览 4评论 NW.jsGatewayWorkerWorkermanPHP技术


想熟悉下聊天室开发,以及到后面想着还不如打个桌面客户端。当自己一步步的完成这个小项目的时候,收货还是挺大的。

所以,跟我一起来吧,通过NW.js+GatewayWorker一步步搭建聊天室桌面客户端,教程有点长,要有点耐心。

环境:linux php7 win10

说明:

GatewayWorker我是装在服务器上的;

NW.js客户端打包这里只做了win10下,具体linux和mac这里没做演示;

host可以替换为你服务器的IP或者域名等。

一、开发GatewayWorker部分。

1.1、安装运行GatewayWorker。


1.1.1 安装

1、下载demo http://www.workerman.net/download/GatewayWorker.zip

2、命令行运行 unzip GatewayWorker.zip 解压缩GatewayWorker.zip

3、命令行运行 cd GatewayWorker 进入GatewayWorker目录

4、命令行运行 php start.php start 启动GatewayWorker

5、新开几个命令行窗口运行 telnet 127.0.0.1 8282,输入任意字符即可聊天(非本机测试请将127.0.0.1替换成实际ip)。

注意:如果telnet超时请检查服务器防火墙(iptables)

以上是官方文档上写清楚,详细的可以直接查看文档。

1.1.2 运行

直接后台运行;

php start.php start -d

如果修改文件,发现没有变化的时候,记得平滑重启下服务;

php start.php reload

注意点1:

当你启动服务的时候,可能会报出Please install posix extension这个错误。

这里是因为你缺少php-posix这个扩展,我这里是php73版本;所以我直接安装即可;

yum list | grep php-process
yum install php73-php-process

安装完成之后,再次尝试启动。

注意点2:

当你把服务部署在云端的话,记得开启下8282端口的访问权限。

1.1.3 前端开发


注意点3:

这里有个需要注意的地方,在前端链接时候,如下:

ws = new WebSocket("ws://host:8282");

这里在实际用网页链接的时候会一直提示连接不上;

因为官网的实例中是开启的tcp协议便于你telnet测试的,所以将start_gateway.php文件中的代码修改如下:

$gateway = new Gateway("tcp://0.0.0.0:8282");
改为:
$gateway = new Gateway("websocket://0.0.0.0:8282");


其他的就可以正常的开发即可,具体的业务逻辑就自己扩展了;

ws = new WebSocket("ws://host:8282");
ws.onopen = function () {
ws.send('发送数据');
};
ws.onmessage = function () {
console.log('接收数据');
};
ws.onclose = function () {
console.log("连接关闭,定时重连");
};
ws.onerror = function () {
console.log("出现错误");
};

二、使用NW.js开发桌面客户端

2.1 安装NW.js服务,我这里直接使用的win版本,下载是nwjs-sdk-v0.41.3-win-x64,分两个版本,一个是normal版,一个是SDK版,SDK是带chrome调试器的,方便调试使用,normal版等正式发布应用的时候再用,所以两个都下载下来。

2.2 接下来就是编写服务,以及打包客户端了,这里还是比较重要的。

2.2.1 正式开发应用:

首先现在这个根目录下创建一个文件夹,我们就命名为 app, 这个文件夹下就可以放入我们的html, css , js, img,等源码;

图1.png 

同时在当前页面创建package.json文件,以及创建完成之后同时复制到app目录下,基础代码如下,具体其他参数可以自行百度:

{
  "name": "helloworld",
  "main": "index.html",
  "window": {
        "title": "hello nw",
        "width": 768,
        "height": 600,
        "toolbar": true,
        "resizable": false,
        "icon": "./team_img1.png"
   }
}

具体的配置参数定义,请查看:https://nwjs.org.cn/doc/api/Manifest-Format.html

图2.png

到此前期工作已经准备完毕。

在这里先说明一下,网上很多文章经常提到根目录,这个在我看来太容易混淆了,我先定义一下,以我演示的例子来说:

D:\nwjs-sdk-v0.41.3-win-x64 这个是nw.js 的根目录

D:\nwjs-sdk-v0.41.3-win-x64\app\ 这个是包含开发源码的工作目录

2.2.2 生成可执行的.exe

首先我们先把app文件夹内的所有文件都打包成一个app.zip,然后把.zip 后缀改成 .nw(其实经过我的测试,就是不改后缀.nw, 直接用.zip一样能生成exe),注意是app内的所有文件压缩,而不是把包括app自身的文件夹压缩:

图3.png

然后把 app.nw 剪切到 上一级目录,也就是根目录下 (我这里是:D:\nwjs-sdk-v0.41.3-win-x64)

图4.png

接下来打开cmd命令窗口:

图5.png

我们找到NW.js的所在根目录,并输入指令:copy /b nw.exe+app.nw app.exe

图6.png

现在根目录下就已经生成了一个 app.exe 的文件,双击可以直接运行

图7.png

图8.png

这样一个干净的应用程序就完成了。

2.2.3 优化部分

1.直接RAR打包,发给用户,这也就是个绿色版,无需安装。

2.我们用软件工具 Enigma Virtual Box 封包,用这个工具可以把整个应用程序文件夹生成一个单独的app.exe, 用户直接双击就能运行,这个也是无需安装的。具体的使用方法请参加 https://www.toolmao.com/nwjs-helloworld,

但这个工具有一个缺点就是打包的程序太大,100M吧,及时在选项里选择压缩,出来也是70M+,而且更新程序也是个问题。

3.用软件工具innosetup,下载地址: http://www.jrsoftware.org/isdl.php,

这个工具会生成一个安装版本,而且安装文件才 50M+,很合适,推荐这种方法,具体的使用方法请参加

https://blog.csdn.net/miaodichiyou/article/details/81668431?utm_source=blogxgwz2x

4安装包的exe的默认图标通过配置文件是无法修改的,需要用工具 Resource Hacker 来修改.

图9.png

2.2.4 最终的效果

图10.png

通过以上的步骤就可以通过NW.js+GatewayWorker一步步搭建聊天室桌面客户端,感兴趣赶紧试试吧。





相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    485

    标签

    42

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。