{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-05-09-serverless-websocket","result":{"data":{"currentBlog":{"id":"2ed40490-e6db-51f2-a0a0-8fa52c3488d7","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020511/1589207418781-ZalNtxgQAC_small.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-05-09T00:00:00.000Z","title":"Serverless 与 Websocket 的聊天工具","description":"传统业务实现 Websocket 并不难，然而函数计算基本上都是事件驱动，不支持长链接操作。如果将函数计算与 API 网关结合，是否可以有 Websocket 的实现方案呢？","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","Websocket"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":263,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-09-serverless-websocket.md","fields":{"slug":"/best-practice/2020-05-09-serverless-websocket/","keywords":["java","python","serverless","函数计算","云函数","secret","网关","item","客户端","Conf","bucket","retmsg","os"]},"html":"

传统业务实现 Websocket 并不难，然而函数计算基本上都是事件驱动，不支持长链接操作。如果将函数计算与 API 网关结合，是否可以有 Websocket 的实现方案呢？

\n

API 网关触发器实现 Websocket

\n

WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工 (full-duplex) 通信，即允许服务器主动发送信息给客户端。WebSocket 在服务端有数据推送需求时，可以主动发送数据至客户端。而原有 HTTP 协议的服务端对于需推送的数据，仅能通过轮询或 long poll 的方式来让客户端获得。

\n

由于云函数是无状态且以触发式运行，即在有事件到来时才会被触发。因此，为了实现 WebSocket，云函数 SCF 与 API 网关相结合，通过 API 网关承接及保持与客户端的连接。您可以认为云函数与 API 网关一起实现了服务端。当客户端有消息发出时，会先传递给 API 网关，再由 API 网关触发云函数执行。当服务端云函数要向客户端发送消息时，会先由云函数将消息 POST 到 API 网关的反向推送链接，再由 API 网关向客户端完成消息的推送。

\n

具体的实现架构如下：

\n

\"实现架构\"

\n

对于 WebSocket 的整个生命周期，主要由以下几个事件组成：

\n\n

对于 WebSocket 整个生命周期的事件，云函数和 API 网关的处理过程如下：

\n\n

因此，云函数与 API 网关之间的交互，需要由 3 类云函数来承载：

\n\n

Websocket 功能实现

\n

根据腾讯云官网提供的该功能的整体架构图：

\n

\"整体架构图\"

\n

这里我们可以使用对象存储 COS 作为持久化的方案，当用户建立链接存储 ConnectionId 到 COS 中，当用户断开连接删除该链接 ID。

\n

其中注册函数：

\n\n \n 复制代码\n \n \n
# -*- coding: utf8 -*-\nimport os\nfrom qcloud_cos_v5 import CosConfig\nfrom qcloud_cos_v5 import CosS3Client\n\nbucket = os.environ.get('bucket')\nregion = os.environ.get('region')\nsecret_id = os.environ.get('secret_id')\nsecret_key = os.environ.get('secret_key')\ncosClient = CosS3Client(CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key))\n\n\ndef main_handler(event, context):\n    print(\"event is %s\" % event)\n\n    connectionID = event['websocket']['secConnectionID']\n\n    retmsg = {}\n    retmsg['errNo'] = 0\n    retmsg['errMsg'] = \"ok\"\n    retmsg['websocket'] = {\n        \"action\": \"connecting\",\n        \"secConnectionID\": connectionID\n    }\n\n    cosClient.put_object(\n        Bucket=bucket,\n        Body='websocket'.encode(\"utf-8\"),\n        Key=str(connectionID),\n        EnableMD5=False\n    )\n\n    return retmsg
\n

传输函数：

\n\n \n 复制代码\n \n \n
# -*- coding: utf8 -*-\nimport os\nimport json\nimport requests\nfrom qcloud_cos_v5 import CosConfig\nfrom qcloud_cos_v5 import CosS3Client\n\nbucket = os.environ.get('bucket')\nregion = os.environ.get('region')\nsecret_id = os.environ.get('secret_id')\nsecret_key = os.environ.get('secret_key')\ncosClient = CosS3Client(CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key))\n\nsendbackHost = os.environ.get(\"url\")\n\n\ndef Get_ConnectionID_List():\n    response = cosClient.list_objects(\n        Bucket=bucket,\n    )\n    return [eve['Key'] for eve in response['Contents']]\n\n\ndef send(connectionID, data):\n    retmsg = {}\n    retmsg['websocket'] = {}\n    retmsg['websocket']['action'] = \"data send\"\n    retmsg['websocket']['secConnectionID'] = connectionID\n    retmsg['websocket']['dataType'] = 'text'\n    retmsg['websocket']['data'] = data\n    requests.post(sendbackHost, json=retmsg)\n\n\ndef main_handler(event, context):\n    print(\"event is %s\" % event)\n\n    connectionID_List = Get_ConnectionID_List()\n    connectionID = event['websocket']['secConnectionID']\n    count = len(connectionID_List)\n    data = event['websocket']['data'] + \"(===Online people:\" + str(count) + \"===)\"\n    for ID in connectionID_List:\n        if ID != connectionID:\n            send(ID, data)\n\n    return \"send success\"
\n

清理函数：

\n\n \n 复制代码\n \n \n
# -*- coding: utf8 -*-\nimport os\nimport requests\nfrom qcloud_cos_v5 import CosConfig\nfrom qcloud_cos_v5 import CosS3Client\n\nbucket = os.environ.get('bucket')\nregion = os.environ.get('region')\nsecret_id = os.environ.get('secret_id')\nsecret_key = os.environ.get('secret_key')\ncosClient = CosS3Client(CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key))\n\nsendbackHost = os.environ.get(\"url\")\n\n\ndef main_handler(event, context):\n    print(\"event is %s\" % event)\n\n    connectionID = event['websocket']['secConnectionID']\n\n    retmsg = {}\n    retmsg['websocket'] = {}\n    retmsg['websocket']['action'] = \"closing\"\n    retmsg['websocket']['secConnectionID'] = connectionID\n    requests.post(sendbackHost, json=retmsg)\n\n    cosClient.delete_object(\n        Bucket=bucket,\n        Key=str(connectionID),\n    )\n\n    return event
\n

Yaml 文件如下：

\n\n \n 复制代码\n \n \n
Conf:\n  component: \"serverless-global\"\n  inputs:\n    region: ap-guangzhou\n    bucket: chat-cos-1256773370\n    secret_id:\n    secret_key:\n\nmyBucket:\n  component: '@serverless/tencent-cos'\n  inputs:\n    bucket: ${Conf.bucket}\n    region: ${Conf.region}\n\nrestApi:\n  component: '@serverless/tencent-apigateway'\n  inputs:\n    region: ${Conf.region}\n    protocols:\n      - http\n      - https\n    serviceName: ChatDemo\n    environment: release\n    endpoints:\n      - path: /\n        method: GET\n        protocol: WEBSOCKET\n        serviceTimeout: 800\n        function:\n          transportFunctionName: ChatTrans\n          registerFunctionName: ChatReg\n          cleanupFunctionName: ChatClean\n\n\nChatReg:\n  component: \"@serverless/tencent-scf\"\n  inputs:\n    name: ChatReg\n    codeUri: ./code\n    handler: reg.main_handler\n    runtime: Python3.6\n    region:  ${Conf.region}\n    environment:\n      variables:\n        region: ${Conf.region}\n        bucket: ${Conf.bucket}\n        secret_id: ${Conf.secret_id}\n        secret_key: ${Conf.secret_key}\n        url: http://set-gwm9thyc.cb-guangzhou.apigateway.tencentyun.com/api-etj7lhtw\n\nChatTrans:\n  component: \"@serverless/tencent-scf\"\n  inputs:\n    name: ChatTrans\n    codeUri: ./code\n    handler: trans.main_handler\n    runtime: Python3.6\n    region:  ${Conf.region}\n    environment:\n      variables:\n        region: ${Conf.region}\n        bucket: ${Conf.bucket}\n        secret_id: ${Conf.secret_id}\n        secret_key: ${Conf.secret_key}\n        url: http://set-gwm9thyc.cb-guangzhou.apigateway.tencentyun.com/api-etj7lhtw\n\nChatClean:\n  component: \"@serverless/tencent-scf\"\n  inputs:\n    name: ChatClean\n    codeUri: ./code\n    handler: clean.main_handler\n    runtime: Python3.6\n    region:  ${Conf.region}\n    environment:\n      variables:\n        region: ${Conf.region}\n        bucket: ${Conf.bucket}\n        secret_id: ${Conf.secret_id}\n        secret_key: ${Conf.secret_key}\n        url: http://set-gwm9thyc.cb-guangzhou.apigateway.tencentyun.com/api-etj7lhtw
\n

注意，这里需要先部署 API 网关。当部署完成，获得回推地址，将回推地址以 url 的形式写入到对应函数的环境变量中：

\n

\n

理论上应该是可以通过 ${restApi.url[0].internalDomain} 自动获得到 url 的，但是我并没有成功获得到这个 url，只能先部署 API 网关，获得到这个地址之后，再重新部署。

\n

部署完成之后，我们可以编写 HTML 代码，实现可视化的 Websocket Client，其核心的 JavaScript 代码为：

\nConnection closed.";\n appendLog(item);\n };\n conn.onmessage = function (evt) {\n\t\t\tvar item = document.createElement("div");\n\t\t\titem.innerText = "接收↓:";\n\t\t\tappendLog(item);\n\n var messages = evt.data.split('\\n');\n for (var i = 0; i < messages.length; i++) {\n var item = document.createElement("div");\n item.innerText = messages[i];\n appendLog(item);\n }\n };\n } else {\n var item = document.createElement("div");\n item.innerHTML = "Your browser does not support WebSockets.";\n appendLog(item);\n }\n};`, `27981019698291433000`)\"\n >\n \n 复制代码\n \n \n
window.onload = function () {\n    var conn;\n    var msg = document.getElementById(\"msg\");\n    var log = document.getElementById(\"log\");\n\n    function appendLog(item) {\n        var doScroll = log.scrollTop === log.scrollHeight - log.clientHeight;\n        log.appendChild(item);\n        if (doScroll) {\n            log.scrollTop = log.scrollHeight - log.clientHeight;\n        }\n    }\n\n    document.getElementById(\"form\").onsubmit = function () {\n        if (!conn) {\n            return false;\n        }\n        if (!msg.value) {\n            return false;\n        }\n        conn.send(msg.value);\n        //msg.value = \"\";\n\n\t\tvar item = document.createElement(\"div\");\n\t\titem.innerText = \"发送↑:\";\n\t\tappendLog(item);\n\n\t\tvar item = document.createElement(\"div\");\n\t\titem.innerText = msg.value;\n\t\tappendLog(item);\n\n        return false;\n    };\n\n    if (window[\"WebSocket\"]) {\n        //替换为websocket连接地址\n        conn = new WebSocket(\"ws://service-01era6ni-1256773370.gz.apigw.tencentcs.com/release/\");\n        conn.onclose = function (evt) {\n            var item = document.createElement(\"div\");\n            item.innerHTML = \"<b>Connection closed.</b>\";\n            appendLog(item);\n        };\n        conn.onmessage = function (evt) {\n\t\t\tvar item = document.createElement(\"div\");\n\t\t\titem.innerText = \"接收↓:\";\n\t\t\tappendLog(item);\n\n            var messages = evt.data.split('\\n');\n            for (var i = 0; i < messages.length; i++) {\n                var item = document.createElement(\"div\");\n                item.innerText = messages[i];\n                appendLog(item);\n            }\n        };\n    } else {\n        var item = document.createElement(\"div\");\n        item.innerHTML = \"<b>Your browser does not support WebSockets.</b>\";\n        appendLog(item);\n    }\n};
\n

完成之后，我们打开两个页面，进行测试：

\n

\n

总结

\n

通过云函数 + API 网关进行 Websocket 的实践，绝对不仅仅是一个聊天工具这么简单，它可以用在很多方面，例如通过 Websocket 进行实时日志系统的制作等。

\n

单独的函数计算，仅仅是一个计算平台，只有和周边的 BaaS 结合，才能展示出 Serverless 架构的价值和真正的能力。这也是为什么很多人说 Serverless=FaaS+BaaS 的一个原因。

\n

期待更多小伙伴，可以通过 Serverless 架构，创造出更多有趣的应用。

\n
\n
\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"e1770fad-8a66-5619-88f6-ef5e50448400","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020511/1589207417699-ZalNtxgQAC_small.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-05-10T00:00:00.000Z","title":"从企业微信机器人到小爱同学，用 Serverless 实现生活智能化！","description":"通过定时触发器，可以非常简单快速地建立一个企业微信机器人。我们可以用它来实现喝水、吃饭提醒等小功能，还能实现定时推送新闻、天气，甚至是监控告警的小功能","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","企业微信"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":null},"wordCount":{"words":219,"sentences":54,"paragraphs":54},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-10-enterprise-wechat.md","fields":{"slug":"/best-practice/2020-05-10-enterprise-wechat/","keywords":["go","python","serverless","云函数","request","urllib","attr","json"]}},"nextBlog":{"id":"249242aa-c81b-5ff8-9553-90e8792af73e","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020511/1589207417923-ZalNtxgQAC_small.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-05-08T00:00:00.000Z","title":"云函数 SCF 与对象存储实现 WordCount","description":"本文将通过 MapReduce 模型实现一个简单的 WordCount 算法，区别于传统使用 Hadoop 等大数据框架，本文使用的是对象存储 COS 与云函数 SCF 的结合","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","WordCount"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":181,"sentences":28,"paragraphs":28},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-08-wordcount.md","fields":{"slug":"/best-practice/2020-05-08-wordcount/","keywords":["python","serverless","云函数","file","cos","bucket","client","event"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"2ed40490-e6db-51f2-a0a0-8fa52c3488d7","previousBlogId":"e1770fad-8a66-5619-88f6-ef5e50448400","nextBlogId":"249242aa-c81b-5ff8-9553-90e8792af73e"}}}