微信小游戏websocket支持https/wss

原来的游戏服用的websocket,支持ws,现在做微信小游戏,需要用wss。不需要改游戏服上的任何东西,只需添加一个nginx代理服,配置nginx支持https/wss即可,客户端跟代理服用wss通讯,代理服跟游戏服还是ws通讯。
在这里插入图片描述
1.安装nginx
(1) gcc

安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc:yum install gcc-c++

(2) PCRE

PCRE(Perl Compatible Regular Expressions)是一个Perl库,包括perl兼容的正则表达式库。nginx的http模块使用pcre来解析正则表达式,所以需要在linux上安装pcre库。

yum install -y pcre pcre-devel

(3) zlib

zlib库提供了很多种压缩和解压缩的方式,nginx使用zlib对http包的内容进行gzip,所以需要在linux上安装zlib库。

yum install -y zlib zlib-devel

(4) openssl

OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用。

nginx不仅支持http协议,还支持https(即在ssl协议上传输http),所以需要在linux安装openssl库。

yum install -y openssl openssl-devel

(5) 编译安装nginx
将nginx-1.15.0.tar.gz拷贝至linux服务器,解压。
1)进入解压目录,输入

./configure --prefix=/usr/local/nginx
–with-stream
–with-http_stub_status_module

2)编译安装
make
make install

安装成功后,安装目录在/usr/local/nginx这里
3)启动nginx
cd /usr/local/nginx/sbin/
./nginx

启动后,用ps -ef |grep nginx查看nginx进程

2.配置nginx
打开安装目录,找到conf目录下nginx.conf,在http模块下添加以下代码

 map $http_upgrade $connection_upgrade {  
	    default upgrade;  
	    '' close;  
    }  
	
    upstream websocket {  
	    server 110.214.159.207:2013;  
    }  

    server {  
	    listen 2013;  
	    server_name test.game.com;
	    ssl on;
	    ssl_certificate /root/nginx-1.15.1/ssl/game.crt;
	    ssl_certificate_key /root/nginx-1.15.1/ssl/game.key;
	    ssl_session_timeout 20m;
	    ssl_verify_client off;
	    location / {  
		proxy_pass http://websocket;  
		proxy_http_version 1.1;  
		proxy_set_header Upgrade $http_upgrade;  
		proxy_set_header Connection "Upgrade";  
	    }
    }  

     upstream websocket1 {  
	    server 110.214.159.207:2015;  
    }  

    server {  
	    listen 2015;  
	    server_name test.game.com;
	    ssl on;
	    ssl_certificate /root/nginx-1.15.1/ssl/game.crt;
	    ssl_certificate_key /root/nginx-1.15.1/ssl/game.key;
	    ssl_session_timeout 20m;
	    ssl_verify_client off;
	    location / {  
		proxy_pass http://websocket1;  
		proxy_http_version 1.1;  
		proxy_set_header Upgrade $http_upgrade;  
		proxy_set_header Connection "Upgrade";  
	    }
    }  

这个里面的110.214.159.207是游戏服ip,2013是代理服监听的端口,server_name是代理服对应的域名,ssl_certificate, ssl_certificate_key需要自己去申请ssl证书,申请后放在对应目录。上面代码的意思是,游戏客户端发送消息到代理服的2013端口,代理服转发到websocket游戏服。

修改配置后检查语法并重启

nginx -t
./nginx -s reload

配置证书后,可能会报错

nginx:[emerg]unknown directive ssl

原因是一开始编译的Nginx的时候并没有把SSL模块一起编译进去。错误解决步骤如下:

步骤一:我们先来到当初下载nginx的包压缩的解压目录/usr/local/src/

步骤二:来到解压目录下后,按顺序执行一下命令:
1)./configure --with-http_ssl_module //重新添加这个ssl模块
2)make
3)在我们执行完做命令后,我们可以查看到在nginx解压目录下,objs文件夹中多了一个nginx的文件,这个就是新版本的程序了。首先我们把之前的nginx先备份一下,然后把新的程序复制过去覆盖之前的即可。

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

cp objs/nginx /usr/local/nginx/sbin/nginx

4)执行./sbin/nginx -V 查看ssl模块是否安装成功,出现 enabled即代表成功
5)测试下,浏览器中F12,console中输入如下代码

ws = new WebSocket(“wss://test.game.com:2013”);

没报错说明成功

遇到的错误及解决方案:

1.使用./nginx -s reload重新读取配置文件,发现报nginx: [error] open() /usr/local/nginx/logs/nginx.pid failed (2: No such file or directory)错误,进到logs文件发现没有nginx.pid文件

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

使用nginx -c的参数指定nginx.conf文件的位置

2.提示:nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)

killall -9 nginx 杀掉nginx 进程 然后重启就行

另外就是还有一个可能,装了2个nginx,删掉一个就行了

为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在微信上,可能你会使用轮询的方式进行,不过这太消耗资源,大量的请求也加重了服务器的负担,而且延迟问题比较严重。如果是自己开发的app,为了解决这些问题,很多团队会自建socket,使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队,采用这种方式自然没什么大问题。不过小团队可能就要花费很多时间去调试,要解决很多难题,这个在成本上就划不来。 H5引入了webSocket来解决网页端的长链接问题,而微信小程序也支持websocket。这是一个非常重要的特性,所以本系列的文章会专门拿出一篇来讨论websocketwebSocket本质上也是TCP连接,它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗,另一方面数据可以是比较实时的进行双向传输(因为是长链接),而且WebSocket允许跨域通信(这里有个潜在的跨域安全的问题,得靠服务端来解决)。目前除IE外的浏览器已经对webSocket支持得很好了,微信小程序再推一把之后,它会变得更加流行。 我们来设计一个新的demo,一个比较有趣的小游戏,多人版扫雷,准确地讲,多人版挖黄金。 游戏规则是这样的:把雷换成金子,挖到金子加一分,每人轮流一次(A挖完轮到B,B挖完A才能再点击),点中金子就算你的,也不会炸,游戏继续,直到把场上所有的金子都挖完游戏才结束。跟扫雷一样,数字也是表示周边有几个金子,然后用户根据场上已经翻出来的数字来猜哪一格可能有金子。 这种交互的游戏难点在于,用户的点击操作都要传到服务器上,而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据,这样才不至于重复点中同一个格子。简单讲,就是你要上报操作给服务器,而服务器也要实时给你推消息。为了简化整个模型,我们规定玩家必须轮流来点击,玩家A点完后,才能轮到玩家B,玩家B操作完,玩家A才能点。 我们分几步来实现这个功能。 一、实现思路 1、第一步,我们要先生成扫雷的地图场景 这个算法比较简单,简述一下。随机取某行某列就可以定位一个格子,标记成金子(-1表示金子)。mimeCnt表示要生成的金子的数量,用同样的方式循环标记mimeCnt个随机格子。生成完后,再用一个循环去扫描这些-1的格子,把它周边的格子都加1,当然必须是非金子的格子才加1。代码放在这里。 其中increaseArround用来把这格金子周边的格子都加1,实现也比较简单: 执行genMimeArr(),随机生成结果如下: -1表示金子。看了下貌似没什么问题。接下去,我们就要接入webSocket了。 (这个是js版本的,其实生成地图场景的工作是在后台生成,这个js版本只是一个演示,不过算法是一样的。) 2、我们需要一个支持webSocket的服务端 本例子中,我们使用python的tornado框架来实现(tornado提供了tornado.websocket模块)。当然读者也可以使用socket.io,专为webSocket设计的js语言的服务端,用起来非常简单,它也对不支持webSocket的浏览器提供了兼容(flash或comet实现)。 笔者本人比较喜欢使用tornado,做了几年后台开发,使用最多的框架之一的就是它,NIO模型,而且非常轻量级,同样的rps,java可能需要700-800M的内存,tornado只要30-40M,所以在一台4G内存的机子上可以跑上百个tornado服务,而java,对不起,只能跑3个虚拟机。微服务的时代,这一点对小公司很重要。当然如果读者本人对java比较熟悉的话,也可以选择netty框架尝试一下。 webSocket用tornado的另一个好处是,它可以在同一个服务(端口)上同时支持webSocket及http两种协议。tornado的官方demo代码中展示了怎么实现同时使用两种协议。在本游戏中,可以这么用:用户进入首页,用http协议去拉取当前的房间号及数据。因为首页是打开最多的,进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接,webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号后,进去下一个游戏页面再开始建立webSocket链接。 3、客户端 使用微信小程序开发工具,直接连接是会报域名安全错误的,因为工具内部做了限制,对安全域名才会允许连接。所以同样的,这里我们也继续改下工具的源码,把相关的行改掉就行修改方式如下: 找到asdebug.js的这一行,把它改成: if(false)即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值