文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

可插拔的跨域聊天机器人实现方案复盘(postMessage版)

2024-12-03 13:47

关注

由于笔者之前的项目中接触过聊天机器人的项目,主要实现机器人客服模块,以及支持跨多平台使用的目的,所以特地总结一下,希望有所收获。

你将学到

效果预览


正文

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

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

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

  1. window.handleData = function(data){ 
  2.     // ... 
  3. let script = document.createElement("script"); 
  4. script.src = "https://xxxx.com/v0/search?q=xuxi&callback=handleData"
  5. 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实现跨域通信

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

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

参数介绍:

我们可以通过如下方式来监听message:

  1. window.addEventListener("message", receiveMessage, false); 
  2.  
  3. function receiveMessage(event){ 
  4.   let origin = event.origin || event.originalEvent.origin;  
  5.   if (origin !== "http://aaa:8080"
  6.     return
  7.  
  8.   // ... 
  9.   console.log(event.data) 
  10.  
  11. // 派发消息的页面 
  12. winB.postMessage(_({text: '休息休息'}), origin) 

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

3. 实现聊天机器人

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

  1. // a.js 
  2. //依赖一个http模块,相当于java中的import,与C#中的using 
  3. var http = require('http'); 
  4. var fs = require('fs'); 
  5. var { resolve } = require('path'); 
  6.  
  7. //创建一个服务器对象 
  8. server = http.createServer(function (req, res) { 
  9. //设置请求成功时响应头部的MIME为纯文本 
  10. res.writeHeader(200, {"Content-Type""text/html"}); 
  11. //向客户端输出字符 
  12. let data = fs.readFileSync(resolve(__dirname, './a.html')) 
  13. res.end(data); 
  14. }); 
  15. //让服务器监听本地8000端口开始运行 
  16. server.listen(8000,'127.0.0.1'); 
  17. console.log('http://127.0.0.1:8000'
  18.  
  19. // b.js 
  20. // ... 
  21. server.listen(8001,'127.0.0.1'); 

由上可知我们a.html代理在8000端口下,b.html代理在8001端口下,由浏览器的同源策略可知他们存在跨域问题。

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


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

  1.  
  2.     "wrap"
  3.         "http://127.0.0.1:8001" frameborder="0" id="b"
  4.         "control"
  5.             "text" placeholder="请输入内容" id="ipt"
  6.             "send">发送 
  7.         
 
  •     
  •  
  •      
  •  
  •  我们可以通过iframe的contentWindow来拿到b页面窗体的引用,然后在发送按钮的点击事件中触发postMessage将数据发送给B。B页面结构如下:

    1.  
    2.     "content"
    3.             

      Lab智能机器人

       
    4.             "content-inner">
     
  •      
  •      
  •  
  •  我们在b页面中去解析a页面的数据并做出相应的回答。这样,我们的基本聊天机器人就实现了。

    4. 回答语料库设计思路

    至于当我们在a页面发送了一个消息,b页面如何解析并回答,可以有如下几种思路:

    5.实现可插拔式

    可插拔式就是一个页面可以放在不同平台使用。这种我们可以设置origin白名单,只需要将b页面封装,其他系统可以使用类于a页面的方式,只提供发送信息的接口,这样我们就可以在不同平使用了。


    在 H5-dooring 项目中也使用了客服机器人 chatbot-antd, 感兴趣可以了解一下.

     

    来源:趣谈前端内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯