Laya微信小游戏websocket支持wss本地测试方法及上线解决方案

原来的微信小游戏开发过程中用的websocket,支持ws,现在微信小游戏准备上线,但是微信后台服务器域名要求是wss的,当时居然天真的以为把客户端联网脚本里的服务器地址在原有基础上改成wss就行,结果看到这张图

OMG,游戏准备上线了,连服务器都连不上,还玩个锤子(心慌慌)

于是,去网上百度了一下,大致是两种解决方法,但是都离不开证书的问题

1.生成客户端证书,生成服务器证书,在请求服务器的时候,客户端会携带自己的证书信息和去和服务器校验,去进行信任(这个是个人理解,可能不是太清晰,多多担待);

2.服务器和客户端不用做任何整改,通过nginx代理,请求域名(如www.xxx.com),然后通过nginx转发到本机指定端口(如127.0.0.1:9001),这样就可以了;

------------------------------------------------------------------我是分割线------------------------------------------------------------------------

针对以上的两种方法,第一种,客户端请求时候携带证书内容,有点不知所措,毕竟之前不是做web的,而且laya小游戏怎么个方法携带客户端证书,直接让我pass掉,第二种,前后端都不用改,只是加个nginx代理就可以了,心想这是最快最方便的方法,就它了。

关于nginx,之前是听过,但是怎么用还是有点茫然,就去菜鸟教程学习了下https://www.runoob.com/linux/nginx-install-setup.html

并在各大博客看了下nginx的各种配置说明,咱们呢就是通过域名转发ws,那就直接开始先在本地测试吧

 

  • 生成RSA私钥

des3算法,1024位强度,server.key 秘钥文件名

openssl genrsa -des3 -out server.key 1024

 

  • 生成CSR(证书签名请求)

openssl req -new -key server.key -out server.csr

 注意 :Common Name必须和域名保持一致 如www.xxx.com(具体名字自己起)

 

 

  • 删除私钥中的密码

openssl rsa -in server.key -out server.key

  • 生成自签名证书

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

 

这时候证书已经生成好了.包含3个文件:server.key | server.csr | server.crt

  • 2.去配置nginx

找到nginx的路径,我的在D盘,找到nginx.conf建议用notepad++打开

先贴配置代码,nginx新手可以把以下文本直接复制到文件里去覆盖,其他的文本可以不要(证书我是放到这里了)

worker_processes  1;


events {
    worker_connections  1024;
}

#WSS转发WS(暂时不要修改)
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

	
    #nginx代理wss测试
    map $http_upgrade $connection_upgrade {  
        default upgrade;  
        '' close;  
    }
    # websocket协议通道
    upstream websocket {
    server 127.0.0.1:9001; #代理的地址
    }

    server {
        listen       443 ssl;
        server_name  www.xxx.com;#模拟的监听端口及域名(就是你生成证书时的域名)

    # SSL 验证配置
    ssl_certificate D:/Nginx/ssl/server.crt;#这里的证书的别加上"",好像加上会变成绝对路径,我是直接方法nginx下的conf里面的
    ssl_certificate_key D:/Nginx/ssl/server.key;
	#ssl_client_certificate D:/Nginx/ssl/ca.crt;#双向认证
    #ssl_verify_client on; #双向认证
    # 默认值
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_session_timeout 10m; 
    ssl_protocols TLSv1.2 TLSv1.1 TLSv1; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m;

 
	#代理地址
    location / {
    proxy_pass http://websocket;#代理到上面的地址去 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; #这个上面有配置的你可以看一下
    proxy_set_header Connection “Upgrade”; 
	
	#Nginx代理webSocket经常中断的解决方案, 如何保持长连接(这个很有用)
	proxy_connect_timeout 4s; #配置点1
    proxy_read_timeout 600s; #配置点2,如果没效,可以考虑这个时间配置长一点
    proxy_send_timeout 12s; #配置点3
    }
  }
}

 

然后重新运行nginx,是有一些命令的

start nginx.exe      (启动)

nginx.exe -s stop     (停止)

nginx.exe -s reload    (修改配置后重新加载生效)

nginx.exe -t     ( 检测配置文件是否正常)

此时打开你的任务管理器,在进程里看到两个nginx,才能算是正常启动(没有正常启动一般是配置文件出错或端口占用的问题,特别是在win10的机器上)

最最最重要的一点,不要遗漏了,记得更改host文件,一般在这个路径C:\Windows\System32\drivers\etc

建议先右键host文件,属性,把只读勾掉,因为要修改啊,在host文件里面加上一行 127.0.0.1   www.xxx.com

然后,这时候可以把laya里服务器地址改成wss://www.xxx.com了,编译后运行,你会发现

当然这个方法只适合本机连接本机测试,你想让同事通过局域网连接?那你要去改下同事的host文件,就可以了,添加一行

192.168.x.xxx   www.xxx.com   (前面ip是你在此网段的地址,因为通过域名访问的是你啊)

本地测试方法就是这样了,线上也是如此的方法。

在只是把一些经验分享给大家,如有不对的地方,还请大家多多担待哈!

 

 

为什么需要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、付费专栏及课程。

余额充值