這篇文章主要講解了“怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么實(shí)現(xiàn)可插拔的跨域聊天機(jī)器人”吧！
創(chuàng)新互聯(lián)建站秉承實(shí)現(xiàn)全網(wǎng)價值營銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，小程序設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)制作，成都做手機(jī)網(wǎng)站，成都全網(wǎng)營銷推廣幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長。
你將學(xué)到
跨域技術(shù)常用方案介紹
postMessage實(shí)現(xiàn)跨域通信
如何實(shí)現(xiàn)聊天機(jī)器人
node搭建本地服務(wù)器來實(shí)現(xiàn)渲染頁面和跨域
回答語料庫設(shè)計(jì)思路
效果預(yù)覽
正文
1. 跨域技術(shù)常用方案介紹
首先要強(qiáng)調(diào)的是跨域的安全限制都是對瀏覽器端來說的，服務(wù)器端是不存在跨域安全限制的。我們常用的跨域技術(shù)主要有如下幾種：
JSONP跨域
iframe+domain跨域
nginx反向代理跨域
cors跨域
postMessage跨域
JSONP實(shí)現(xiàn)跨域請求的原理就是動態(tài)創(chuàng)建script標(biāo)簽，然后利用script的src 不受同源策略約束來跨域獲取數(shù)據(jù)。JSONP 主要由回調(diào)函數(shù)和數(shù)據(jù)兩部分組成?；卣{(diào)函數(shù)的名字一般是在請求中指定的。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的 JSON 數(shù)據(jù)。我們一般可以在全局定義一個回調(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)跨域方式很簡單，但是只支持get請求，對傳輸?shù)臄?shù)據(jù)量有一定限制。cors跨域是目前我們用的比較多的本地調(diào)試方式，原理就是在服務(wù)端設(shè)置響應(yīng)頭header的Access-Control-Allow-Origin字段，這樣瀏覽器檢測到header中的Access-Control-Allow-Origin，這樣就可以跨域了。
至于我們設(shè)置了cors之后在network中出現(xiàn)了兩次請求的問題，其實(shí)涉及到cors跨域的請求預(yù)檢，分為簡單請求和非簡單請求兩種，這塊知識可以單獨(dú)抽離出一篇文章，感興趣的可以自己學(xué)習(xí)了解一下。
2. postMessage實(shí)現(xiàn)跨域通信
window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對于兩個不同頁面的腳本，只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議，端口號以及主機(jī) (兩個頁面的模數(shù) Document.domain設(shè)置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來規(guī)避此限制，只要正確的使用，這種方法就很安全。
本質(zhì)上說postMessage()是基于消息事件機(jī)制來實(shí)現(xiàn)跨域通信，它隸屬于消息窗體本身，比如window以及window內(nèi)嵌的frame的window，基本使用形式如下：
someWindow.postMessage(message, targetOrigin, [transfer]);
參數(shù)介紹：
someWindow 窗口的一個引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames
message將要發(fā)送到其他 window的數(shù)據(jù)。意味著你可以不受什么限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化
targetOrigin 通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"(表示無限制)。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露等安全問題
transfer是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)
我們可以通過如下方式來監(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ā)消息的頁面 winB.postMessage(_({text: '休息休息'}), origin)我們的event里有如下幾個核心的屬性：
data從其他 window 中傳遞過來的對象
origin調(diào)用 postMessage 時消息發(fā)送方窗口的 origin . 這個字符串由 協(xié)議、“://“、域名、“ : 端口號”拼接而成
source對發(fā)送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個窗口之間建立雙向通信
3. 實(shí)現(xiàn)聊天機(jī)器人
在熟悉以上知識點(diǎn)之后，我們開始來寫我們聊天機(jī)器人的demo。首先我們寫兩個html，分別為a.html和b.html，然后用node分別代理兩個不同頁面，設(shè)置不同端口：
// a.js //依賴一個http模塊，相當(dāng)于java中的import，與C#中的using var http = require('http'); var fs = require('fs'); var { resolve } = require('path'); //創(chuàng)建一個服務(wù)器對象 server = http.createServer(function (req, res) { //設(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端口下，由瀏覽器的同源策略可知他們存在跨域問題。
跨域?qū)崿F(xiàn)之后我們可以開始搭建頁面層級了，我們這里將b頁面以iframe的形式嵌入到a頁面，具體結(jié)構(gòu)如下：
這樣我們就可以愉快的搭建postMessage體系了。首先我們在a頁面通過發(fā)送按鈕和輸入框?qū)⑾l(fā)送給b頁面，大致結(jié)構(gòu)如下：
