可插拔的跨域聊天機(jī)器人實(shí)現(xiàn)方案復(fù)盤(postMessage版)
由于筆者之前的項(xiàng)目中接觸過(guò)聊天機(jī)器人的項(xiàng)目，主要實(shí)現(xiàn)機(jī)器人客服模塊，以及支持跨多平臺(tái)使用的目的，所以特地總結(jié)一下，希望有所收獲。
你將學(xué)到
- 跨域技術(shù)常用方案介紹
- postMessage實(shí)現(xiàn)跨域通信
- 如何實(shí)現(xiàn)聊天機(jī)器人
- node搭建本地服務(wù)器來(lái)實(shí)現(xiàn)渲染頁(yè)面和跨域
- 回答語(yǔ)料庫(kù)設(shè)計(jì)思路
效果預(yù)覽
正文
1. 跨域技術(shù)常用方案介紹
首先要強(qiáng)調(diào)的是跨域的安全限制都是對(duì)瀏覽器端來(lái)說(shuō)的，服務(wù)器端是不存在跨域安全限制的。我們常用的跨域技術(shù)主要有如下幾種：
- JSONP跨域
- iframe+domain跨域
- nginx反向代理跨域
- cors跨域
- postMessage跨域
JSONP實(shí)現(xiàn)跨域請(qǐng)求的原理就是動(dòng)態(tài)創(chuàng)建script標(biāo)簽，然后利用script的src 不受同源策略約束來(lái)跨域獲取數(shù)據(jù)。JSONP 主要由回調(diào)函數(shù)和數(shù)據(jù)兩部分組成?；卣{(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的 JSON 數(shù)據(jù)。我們一般可以在全局定義一個(gè)回調(diào)函數(shù)，然后在script標(biāo)簽里傳入回調(diào)函數(shù)即可：
- window.handleData = function(data){
- // ...
- }
- let script = document.createElement("script");
- script.src = "https://xxxx.com/v0/search?q=xuxi&callback=handleData";
- document.body.insertBefore(script, document.body.firstChild);
這樣我們就能在回調(diào)函數(shù)handleData中拿到服務(wù)器接口返回的數(shù)據(jù)了。
雖然jsonp實(shí)現(xiàn)跨域方式很簡(jiǎn)單，但是只支持get請(qǐng)求，對(duì)傳輸?shù)臄?shù)據(jù)量有一定限制。cors跨域是目前我們用的比較多的本地調(diào)試方式，原理就是在服務(wù)端設(shè)置響應(yīng)頭header的Access-Control-Allow-Origin字段，這樣瀏覽器檢測(cè)到header中的Access-Control-Allow-Origin，這樣就可以跨域了。
至于我們?cè)O(shè)置了cors之后在network中出現(xiàn)了兩次請(qǐng)求的問(wèn)題，其實(shí)涉及到cors跨域的請(qǐng)求預(yù)檢，分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求兩種，這塊知識(shí)可以單獨(dú)抽離出一篇文章，感興趣的可以自己學(xué)習(xí)了解一下。
2. postMessage實(shí)現(xiàn)跨域通信
- window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對(duì)于兩個(gè)不同頁(yè)面的腳本，只有當(dāng)執(zhí)行它們的頁(yè)面位于具有相同的協(xié)議，端口號(hào)以及主機(jī) (兩個(gè)頁(yè)面的模數(shù) Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來(lái)規(guī)避此限制，只要正確的使用，這種方法就很安全。
本質(zhì)上說(shuō)postMessage()是基于消息事件機(jī)制來(lái)實(shí)現(xiàn)跨域通信，它隸屬于消息窗體本身，比如window以及window內(nèi)嵌的frame的window，基本使用形式如下：
- someWindow.postMessage(message, targetOrigin, [transfer]);
參數(shù)介紹：
- someWindow 窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過(guò)或數(shù)值索引的window.frames
- message 將要發(fā)送到其他 window的數(shù)據(jù)。意味著你可以不受什么限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化
- targetOrigin 通過(guò)窗口的origin屬性來(lái)指定哪些窗口能接收到消息事件，其值可以是字符串"*"(表示無(wú)限制)。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露等安全問(wèn)題
- transfer 是一串和message 同時(shí)傳遞的 Transferable 對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)
我們可以通過(guò)如下方式來(lái)監(jiān)聽(tīng)message：
- window.addEventListener("message", receiveMessage, false);
- function receiveMessage(event){
- let origin = event.origin || event.originalEvent.origin;
- if (origin !== "http://aaa:8080")
- return;
- // ...
- console.log(event.data)
- }
- // 派發(fā)消息的頁(yè)面
- winB.postMessage(_({text: '休息休息'}), origin)
我們的event里有如下幾個(gè)核心的屬性：
- data 從其他 window 中傳遞過(guò)來(lái)的對(duì)象
- origin 調(diào)用 postMessage 時(shí)消息發(fā)送方窗口的 origin . 這個(gè)字符串由 協(xié)議、“://“、域名、“ : 端口號(hào)”拼接而成
- source 對(duì)發(fā)送消息的窗口對(duì)象的引用; 您可以使用此來(lái)在具有不同origin的兩個(gè)窗口之間建立雙向通信
3. 實(shí)現(xiàn)聊天機(jī)器人
在熟悉以上知識(shí)點(diǎn)之后，我們開(kāi)始來(lái)寫我們聊天機(jī)器人的demo。首先我們寫兩個(gè)html，分別為a.html和b.html，然后用node分別代理兩個(gè)不同頁(yè)面，設(shè)置不同端口：
- // a.js
- //依賴一個(gè)http模塊，相當(dāng)于java中的import，與C#中的using
- var http = require('http');
- var fs = require('fs');
- var { resolve } = require('path');
- //創(chuàng)建一個(gè)服務(wù)器對(duì)象
- server = http.createServer(function (req, res) {
- //設(shè)置請(qǐng)求成功時(shí)響應(yīng)頭部的MIME為純文本
- res.writeHeader(200, {"Content-Type": "text/html"});
- //向客戶端輸出字符
- let data = fs.readFileSync(resolve(__dirname, './a.html'))
- res.end(data);
- });
- //讓服務(wù)器監(jiān)聽(tīng)本地8000端口開(kāi)始運(yùn)行
- server.listen(8000,'127.0.0.1');
- console.log('http://127.0.0.1:8000')
- // b.js
- // ...
- server.listen(8001,'127.0.0.1');
由上可知我們a.html代理在8000端口下，b.html代理在8001端口下，由瀏覽器的同源策略可知他們存在跨域問(wèn)題。
跨域?qū)崿F(xiàn)之后我們可以開(kāi)始搭建頁(yè)面層級(jí)了，我們這里將b頁(yè)面以iframe的形式嵌入到a頁(yè)面，具體結(jié)構(gòu)如下：
這樣我們就可以愉快的搭建postMessage體系了。首先我們?cè)赼頁(yè)面通過(guò)發(fā)送按鈕和輸入框?qū)⑾l(fā)送給b頁(yè)面，大致結(jié)構(gòu)如下：
- <body>
- <div class="wrap">
- <iframe src="http://127.0.0.1:8001" frameborder="0" id="b"></iframe>
- <div class="control">
- <input type="text" placeholder="請(qǐng)輸入內(nèi)容" id="ipt">
- <span id="send">發(fā)送</span>
- </div>
- </div>
- <script>
- window.onload = function() {
- let origin = 'http://127.0.0.1:8001';
- let _ = (data) => JSON.stringify(data);
- let winB = document.querySelector('#b').contentWindow;
- let sendBtn = document.querySelector('#send');
- sendBtn.addEventListener('click', (e) => {
- let text = document.querySelector('#ipt');
- winB.postMessage(_({text: text.value}), origin)
- text.value = '';
- }, false)
- winB.postMessage(_({text: ''}), origin)
- }
- </script>
- </body>
我們可以通過(guò)iframe的contentWindow來(lái)拿到b頁(yè)面窗體的引用，然后在發(fā)送按鈕的點(diǎn)擊事件中觸發(fā)postMessage將數(shù)據(jù)發(fā)送給B。B頁(yè)面結(jié)構(gòu)如下：
- <body>
- <div class="content">
- <h4>Lab智能機(jī)器人</h4>
- <div class="content-inner"></div>
- </div>
- <script>
- // 語(yǔ)料庫(kù)
- const pool = [];
- window.addEventListener("message", receiveMessage, false);
- let content = document.querySelector('.content-inner');
- let initContentH = content.scrollHeight;
- let _ = (data) => JSON.stringify(data);
- function createChat(type, mes) {
- let dialog = document.createElement('div');
- dialog.className = type === 0 ? 'dialog robot' : 'dialog user';
- let content = type === 0 ? `
- <span class="tx">${type === 0 ? 'lab' : 'user'}</span>
- <span class="mes">${mes}</span>
- ` : `
- <span class="mes">${mes}</span>
- <span class="tx">${type === 0 ? 'lab' : 'user'}</span>
- `;
- dialog.innerHTML = content;
- return dialog
- }
- function scrollTop(el, h) {
- if(el.scrollHeight !== h) {
- el.scrollTop = h + 100;
- }
- }
- function receiveMessage(event){
- // 兼容其他瀏覽器
- let origin = event.origin || event.originalEvent.origin;
- if(origin === 'http://127.0.0.1:8000') {
- let data = JSON.parse(event.data);
- if(data && !data.text) {
- mes = { text: '你好，我是機(jī)器人Lab，請(qǐng)問(wèn)有什么可以幫到您的嗎？' };
- event.source.postMessage(_(mes), event.origin)
- content.appendChild(createChat(0, mes.text))
- }else {
- content.appendChild(createChat(1, data.text))
- scrollTop(content, initContentH)
- setTimeout(() => {
- content.appendChild(createChat(0, '正在解決'))
- scrollTop(content, initContentH)
- }, 2000);
- }
- }
- }
- </script>
- </body>
4. 回答語(yǔ)料庫(kù)設(shè)計(jì)思路
至于當(dāng)我們?cè)赼頁(yè)面發(fā)送了一個(gè)消息，b頁(yè)面如何解析并回答，可以有如下幾種思路：
- 通過(guò)后端接口實(shí)現(xiàn)，即我們可以將a的數(shù)據(jù)作為參數(shù)傳遞給某個(gè)后端接口，讓后端來(lái)實(shí)現(xiàn)返回需要的數(shù)據(jù)，這種在AI機(jī)器人中應(yīng)用的很廣泛。
- 純前端實(shí)現(xiàn)。前端定義回答的語(yǔ)料庫(kù)，通過(guò)關(guān)鍵詞匹配來(lái)拿到實(shí)現(xiàn)應(yīng)答，這種一般用于普通的預(yù)設(shè)問(wèn)題的回答。
5.實(shí)現(xiàn)可插拔式
可插拔式就是一個(gè)頁(yè)面可以放在不同平臺(tái)使用。這種我們可以設(shè)置origin白名單，只需要將b頁(yè)面封裝，其他系統(tǒng)可以使用類于a頁(yè)面的方式，只提供發(fā)送信息的接口，這樣我們就可以在不同平使用了。
在 H5-dooring 項(xiàng)目中也使用了客服機(jī)器人 chatbot-antd, 感興趣可以了解一下.
