关于云变量
我们先来看下云变量的样子:
Scratch团队在FAQ里解释了
什么是云变量
云变量可以让作品里保存的数据与Scratch社区的其他人所共享。你可以利用云变量发布调查或其他作品，而社区中的其他人可以访问和修改这些数据。
谁能看见云变量中存放的数据？
当你运行一个用了云变量的作品时，你使用过程中产生的数据会存放在你的用户名下，其他人可以看到这些数据。
云变量可以存放什么类型的数据？
云变量只能存放数字。
我能使用云变量创建聊天室吗？
不可以。虽然在技术上是可能的，但Scratch网站不允许这样做。
谁可以改变云变量的内容?
只有你和项目的查看者才能将数据存储在项目的云变量中。
如果人们进入项目内部源码或重新混合(remix)你的代码，将会创建变量的副本，而不会影响或更改原始变量。
可以用云变量创作多人游戏吗？
由于网速和同步的问题，创作多人游戏比较困难。但仍然有一些Scratcher别出心载，使用云变量制作回合制游戏以及其他类型的游戏。
云变量会在后台产生日志。每个项目最多有10个云变量。
Scratch新用户可能无法使用云数据。Scratch团队不希望Scratch新手滥用云变量，因为它可能会给系统带来很大的负担。
云变量会自动更新，利用这个特性，可以建立联机游戏和聊天室，但官方不希望有高频交互，这将带来服务器压力。此外，实时性也不能保证，如果你希望建立实时的强连接，参考codelab-adapter的虫洞(wormhole)。
说了半天，你可以看一个带有云变量的项目Google Chrome Dino Run 2 remix
解释完了云变量，我们进入技术分析部分，我们试图回答: 云变量是怎么实现的，并给出简单的实现例子。
分析
和之前的分析一样，借助Chrome DevTools,我们来观察创建和使用云变量的过程中都发生了什么。
创建变量
注意: 你的账号不能是新注册的，否则你没有创建云变量的权限。
创建我们的第一个云变量: test_cloud_var
来看看请求细节(Headers)
Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的。websocket中似乎没有处理用户凭证相关的问题。
接着看看Frames:
向上的箭头表示的数据流向为 client(scratch-gui)-> server
向下的箭头表示的数据流向为 server-> client
创建变量的过程非常简单：
- 建立websocket通道
- 在websocket通道中来回传送json。采用类似json-rpc的交互方式。
后端的云变量服务地址位于wss://clouddata.scratch.mit.edu/，通过这个线索，我们可以找到与云变量相关的前端源码, 源码非常简单。
设置变量
值得注意的是，设置变量的过程，数据从前端发往服务端，服务端不做响应。
刷新项目
项目中存在云变量时，我们重新打开这个项目，默认将拉去云变量中存储的的值
删除云变量
权限问题
从前端源码中似乎没看到权限相关的部分。
明天有空做个实验，试试未登录状态是否能与云变量服务进行通信。
1
2
3
4
5
6
7
8
9
|
var ws = new WebSocket('wss://clouddata.scratch.mit.edu/');
ws.onopen = function(evt) {
var data = {"method":"handshake","user":"wwj718","project_id":"291228938"}
ws.send(JSON.stringify(data)+"\n");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
};
|
实验发现只有在登陆情况下，才能建立websocket连接。websocket在建立连接的时候会携带cookie，这就是实现用户身份验证的关键。
实现一个云变量服务
下边我们给出兼容Scratch开源前端的云变量后端实现。这个实现只作为原理展示，如果你要用于生产环境，需要做些调整。
该实现基于Python的websockets
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import json
import asyncio
import websockets
# json-rpc
def handshake(req_json):
# 返回项目中已有的云变量
project_id = req_json.get("project_id")
result = {"method":"set","project_id":project_id,"name":"☁ test","value":"0"}
return result
def create(req_json):
# {"method":"create","user":"wwj718","project_id":"291229535","name":"☁ test1","value":0}
name = req_json.get("name")
return {"method": "ack", "name": name, "reply": "OK"}
def set(req_json):
# {"method":"set","user":"wwj718","project_id":"291229535","name":"☁ test1","value":"0"}
return None
def delete(req_json):
# {"method":"delete","user":"wwj718","project_id":"291229535","name":"☁ test1"}
return None
method_map = {}
method_map["handshake"] = handshake
method_map["create"] = create
method_map["set"] = set
method_map["delete"] = delete
async def handle_cloud_data(websocket, path):
async for message in websocket:
# from IPython import embed;embed()
# message结尾有换行符\n, 流
req_json = json.loads(message.strip())
print("request data:",req_json)
method = req_json.get("method")
handle = method_map.get(method)
if handle:
result = handle(req_json)
await websocket.send(json.dumps(result))
asyncio.get_event_loop().run_until_complete(
websockets.serve(handle_cloud_data, '0.0.0.0', 8765))
print("server is running")
asyncio.get_event_loop().run_forever()
|
测试代码与scratch-gui中的代码基本一致:
1
2
3
4
5
6
7
8
9
10
11
12
|
var ws = new WebSocket('ws://127.0.0.1:8765');
ws.onopen = function(evt) {
var data = {"method":"handshake","user":"wwj718","project_id":"291228938"}
ws.send(JSON.stringify(data)+"\n");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
};
// var data = {"method":"set","user":"wwj718","project_id":"291228938","name":"☁ test1","value":"1"}
// ws.send(JSON.stringify(data)+"\n")
|
如果你要用于生产环境，还需要处理cookie和多个客户端一同读写云变量的问题(考虑到读写频率，推荐使用redis， 如果你的后端也用python异步api实现，推荐使用aioredis)。
websocket测试工具
Socket Wrench
其他值得留意的问题
速率限制
throttle 10:
Send a message to the cloud server at a rate of no more than 10 messages/sec
this.sendCloudData = throttle(this._sendCloudData, 100);
参考: