怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人

這篇文章主要講解了“怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人”吧！

你將學(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)聽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)之后，我們開始來(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)聽本地8000端口開始運(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)之后我們可以開始搭建頁(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">             <h5>Lab智能機(jī)器人</h5>             <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>

 我們?cè)赽頁(yè)面中去解析a頁(yè)面的數(shù)據(jù)并做出相應(yīng)的回答。這樣，我們的基本聊天機(jī)器人就實(shí)現(xiàn)了。

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ā)送信息的接口，這樣我們就可以在不同平使用了。

感謝各位的閱讀，以上就是“怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！