日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

[[373659]]

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供德欽網(wǎng)站建設(shè)、德欽做網(wǎng)站、德欽網(wǎng)站設(shè)計(jì)、德欽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、德欽企業(yè)網(wǎng)站模板建站服務(wù)，十載德欽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

由于筆者之前的項(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)寫(xiě)我們聊天機(jī)器人的demo。首先我們寫(xiě)兩個(gè)html，分別為a.html和b.html，然后用node分別代理兩個(gè)不同頁(yè)面，設(shè)置不同端口：

 
 
 
 

  
  
  
  
// a.js 
  
  
  
  
//依賴(lài)一個(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)如下：

  
 
 
 

   
  
  
  
 
   
  
  
  
     
   
  
  
  
         
   
  
  
  
         
   
  
  
  
             
   
  
  
  
            發(fā)送