这篇文章主要讲解了“怎么实现可插拔的跨域聊天机器人”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么实现可插拔的跨域聊天机器人”吧！

创新互联建站秉承实现全网价值营销的理念，以专业定制企业官网，成都网站制作、网站建设、外贸网站建设，小程序设计，网页设计制作，成都做手机网站，成都全网营销推广帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理，汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。

你将学到

• 跨域技术常用方案介绍

• postMessage实现跨域通信

• 如何实现聊天机器人

• node搭建本地服务器来实现渲染页面和跨域

• 回答语料库设计思路

效果预览

正文

1. 跨域技术常用方案介绍

首先要强调的是跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。我们常用的跨域技术主要有如下几种：

• JSONP跨域

• iframe+domain跨域

• nginx反向代理跨域

• cors跨域

• postMessage跨域

JSONP实现跨域请求的原理就是动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。JSONP  主要由回调函数和数据两部分组成。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON  数据。我们一般可以在全局定义一个回调函数，然后在script标签里传入回调函数即可：

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);

这样我们就能在回调函数handleData中拿到服务器接口返回的数据了。

虽然jsonp实现跨域方式很简单，但是只支持get请求，对传输的数据量有一定限制。cors跨域是目前我们用的比较多的本地调试方式，原理就是在服务端设置响应头header的Access-Control-Allow-Origin字段，这样浏览器检测到header中的Access-Control-Allow-Origin，这样就可以跨域了。

至于我们设置了cors之后在network中出现了两次请求的问题，其实涉及到cors跨域的请求预检，分为简单请求和非简单请求两种，这块知识可以单独抽离出一篇文章，感兴趣的可以自己学习了解一下。

2. postMessage实现跨域通信

• window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议，端口号以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()  方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

本质上说postMessage()是基于消息事件机制来实现跨域通信，它隶属于消息窗体本身，比如window以及window内嵌的frame的window，基本使用形式如下：

someWindow.postMessage(message, targetOrigin, [transfer]);

参数介绍：

• someWindow 窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames

• message将要发送到其他 window的数据。意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化

• targetOrigin 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"(表示无限制)。不提供确切的目标将导致数据泄露等安全问题

• transfer是一串和message 同时传递的 Transferable 对象.  这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

我们可以通过如下方式来监听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) }  // 派发消息的页面 winB.postMessage(_({text: '休息休息'}), origin)

我们的event里有如下几个核心的属性：

• data从其他 window 中传递过来的对象

• origin调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成

• source对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信

3. 实现聊天机器人

在熟悉以上知识点之后，我们开始来写我们聊天机器人的demo。首先我们写两个html，分别为a.html和b.html，然后用node分别代理两个不同页面，设置不同端口：

// a.js //依赖一个http模块，相当于java中的import，与C#中的using var http = require('http'); var fs = require('fs'); var { resolve } = require('path');  //创建一个服务器对象 server = http.createServer(function (req, res) { //设置请求成功时响应头部的MIME为纯文本 res.writeHeader(200, {"Content-Type": "text/html"}); //向客户端输出字符 let data = fs.readFileSync(resolve(__dirname, './a.html')) res.end(data); }); //让服务器监听本地8000端口开始运行 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端口下，由浏览器的同源策略可知他们存在跨域问题。

跨域实现之后我们可以开始搭建页面层级了，我们这里将b页面以iframe的形式嵌入到a页面，具体结构如下：

这样我们就可以愉快的搭建postMessage体系了。首先我们在a页面通过发送按钮和输入框将消息发送给b页面，大致结构如下：

                                                 发送