localStorage互斥锁的使用

Posted on

JavaScript是单线程语言,所以我们在写代码的时候根本不会遇到互斥锁的问题。但是当用户打开多个Tab页面的时候,这些页面却是共享同一个localStorage的。当我们试图修改localStorage的时候就会遇到竞争问题,如果两个页面同时修改了localStorage,程序的可靠性就无法保证。

多Tab互斥

这个问题查了不少时间,目前有的解决方案:Shared Web Workersfast mutex。由于想尽可能的支持更多浏览器,所以我们选择了后者。

实现localStorage互斥

fast mutex的源码也不是很多,所以读起来也没有很复杂。当执行lock函数的时候,会为一个key存储 _MUTEX_LOCK_X_KEY_MUTEX_LOCK_Y_KEY。以下简称X和Y。 首先存X,然后读Y。如果Y存在说明别人已经拿到互斥锁了,所以重新执行函数。直到获取到互斥锁。如果Y不存在,说明没有人竞争锁。所以往下继续执行存储Y。 但是我们不能保证这段时间没有别的tab来存储X或者Y。所以继续读取X,如果X没有发生变化,说明没有人来竞争锁。我们就可以resolve传入的回调函数了。 如果X发生了变化,说明有人来竞争互斥锁,这时候的函数设置了一个50ms的延迟执行,就是保证检测的足够晚。竞争的tab能够执行完自己的lock函数。50ms之后再去读取Y,如果发现Y没有发生变化,则自己还拥有这个互斥锁,可以顺利执行resolve。否则自己丢失了互斥锁,重新执行lock函数。

总结

fast mutex的实现确实很巧妙,通过添加两个localStorage值和setTimeout完成互斥锁的实现。看到这个项目之前,一直以为想做到localStorage的互斥是不现实的事情。

tagged: mutex

亚马逊S3服务简单介绍

Posted on

最近在做后端的开发,需要一些二进制数据保存在服务器云端。团队决定调查AWS的S3服务是否满足需求,所以就做了一些调查工作。不过也遇到很多坑的地方。所以记录下来,防止以后再遇到。

基本需求

需要云服务有稳定性保证,并且可以批量上传文件。可以设置上传和下载链接的有效期。

AWS试用

AWS提供免费试用,但是注册的时候需要填写信用卡信息。确实有点不安,万一不小心被收费了就不好了。

生成上传凭证

我使用的是AWS的 JavaScript SDK。使用createPresignedPost API可以创建用于上传的凭证。这个凭证是根据用户的AccessId,AccessKey和Policy策略等计算生成的,并没有和AWS服务器直接进行交互。所以不用担心这个接口和AWS直接的流量费用问题。

var params = {
  Bucket: 'bucket',
  Conditions: [
    ['starts-with', '$key', 'path/to/uploads/']
  ]
};
s3.createPresignedPost(params, function(err, data) {
  if (err) {
    console.error('Presigning post data encountered an error', err);
  } else {
    data.Fields.key = 'path/to/uploads/${filename}';
    console.log('The post data is', data);
  }
});

官方提供的例子中,可以使用starts-with的方式来指定上传文件的key必须是以什么开头的,这样就可以指定上传的文件夹。很多文件也可以使用这一个上传凭证来完成上传。

上传Policy构造

AWS提供了一个详细文档说明如何构造合法的Policy:Creating a POST Policy。例如常见的需求就是在上传的时候添加meta信息声明文件的格式或者MD5值。 Policy的Conditions数组里面可以添加["starts-with", "$x-amz-meta-md5checksum", ""]。最后一个参数为空字符串代表可以上传任何数值。

构造POST表单

AWS也有文档说明了如何构造一个上传的表单。这个表单中最重要的是一句注释:The elements after this will be ignored。在file字段之后的所有信息都会被忽略掉,我测试的时候一直把x-amz-meta-md5checksum字段放在file字段之后导致上传一直报错。直到Stack Overflow上面有人解释了才恍然大悟。

构造下载链接

我们使用getSignedUrl API来生成下载链接,下载链接也是根据自己的AccessId和AccessKey生成链接的凭证,也没有和AWS服务器直接进行交互。当请求文件的时候,AWS再计算凭证是否有效。所以后端无需和AWS交互就可以返回客户端有效的AWS下载链接。针对需要返回实际文件的API接口,可以采用返回302的跳转链接来完成需求。示例代码如下:

var params = {Bucket: 'bucket', Key: 'key'};
var url = s3.getSignedUrl('getObject', params);
console.log('The URL is', url);

可能有人会问,这个API也可以用来上传啊。但是这个API接口必须指定key值,这样我们就需要为每个文件来生成一个独立的上传URL。这样太麻烦了。

总结

我们使用pre-sign的方式来生成URL主要是为了对客户端透明。虽然我们可以设置最小权限的IAM User给客户端,但是客户端很容易被逆向拿到敏感数据。这样难免会有风险,所以生成一个单纯的URL供客户端使用一定程度上保证了安全性也减少了客户端的复杂性。毕竟我也不想引入一个AWS的SDK进来。

tagged: AWS

前端开发地图应用的调研

Posted on

我司的产品终于发布了新版本,所以忙碌的开发暂时告一段落。最近在做下一期的规划,然后就是要做前端网站来满足用户的需求。由于我们的产品是和地图强相关的,所以也对地图做了很多调研。

基本需求

产品需要在国内和国外使用,费用合理,可以换地图的贴图并且能在地图上绘制各种信息。例如多边形或圆形还有贝塞尔曲线。

MapKit JS

苹果居然也出了网页版本的地图产品MapKit JS,可谓是良心。但是目前还处于Beta版本。如果以后要考虑产品的全平台化,显然不是一个很好的选择。不过苹果的产品可以在国内国外使用不用太担心地图偏移问题,而且可以贴图和绘制图形,但是目前网页版还不能绘制贝塞尔曲线,iOS客户端倒是可以。

MapBox

MapBox是一个地图服务提供商,经过调研MapBox使用最新的WebGL技术来渲染,摆脱了传统的下tile来贴图的方式,渲染速度得到了大大的提升。也能解决国内和国外的地图显示问题,但是画图功能就只有画线和多边形。不过提供了底层的画图层的接口,需要自己写WebGL的shader。这就增加了开发成本。。。

GoogleMap

谷歌地图当然好,但是我最后才说。因为谷歌无法在国内使用,这种情况下我就不得不写两套接口来对应,例如国内高德地图,国外谷歌地图,会大大增加开发成本。而且谷歌地图最近刚升级付费条款,费用是按照请求次数来收,所以用户大量增长之后的开销也会非常大。不过谷歌也不能画贝塞尔曲线。。。

地理坐标系

由于是需要在地图上绘制新的tiles,所以自然就涉及到坐标的转换和计算。如何计算一个经纬度落在哪一张tiles上,以及在不同缩放级别下tiles的正常显示和重绘。这些都是需要自己来实现的。 这里有一个还算有名的官方介绍,并给出了Python的源码。可以参考这个来进行实现。

坐标系转换

每个国家都有自己的坐标系系统,虽然GPS使用的WGS 84标准非常流行,但是这个是美国制定的。每个国家当然都需要根据自己国家需要来定制自己的标准。例如中国就有北京54坐标系,西安80坐标系。北京54和西安80是参心坐标系,大地原点分别在苏联和西安。难以表达高度信息,目前国家正在推广2000国家大地坐标系,这个和WGS84一样是地心坐标系,即以地球质量中心为原点。日本也有自己的平面直角坐标系,我们当然需要各种坐标转换,还好有现成的开源项目proj4js

总结

各个地图服务商都各有优劣,但却没有一款完美的。主要是用途也比较特殊,可能在地图服务上进行二次开发的可能性比较高吧。不过提供地图服务的也没几家可以选择的。。。

tagged: js map