项目4任务3-在Node-RED 中搭建Web服务器

2相关知识34任务小结与练习1任务实施任务引入与目标在Node-RED中搭建Web服务器一、任务引入与目标任务目标任务3在Node-RED中搭建Web服务器,APP收到用户反馈意见时,APP中创建的HTTP客户端连接服务器;服务器对HTTP请求进行处理,完成邮件转发,并将响应发回;APP接收HTTP响应,处理其中的数据部分。实现效果:(1)手机点击“反馈建议”按钮后,调出对话框。(2)在对话框输入内容后,以post方式向Node-RED中创建的HTTP服务端提交HTTP请求,网址为后台url加上后缀APP_feedback。(3)Node-RED中创建的HTTP服务端收到请求后,发回响应内容“成功收到,感谢您的反馈与建议”,APP将接收的响应内容在屏幕上Toast出来。(4)后台将收到的内容转发至作者邮箱。任务引入如果用户对APP有一些建议,那么该怎样联系作者呢?可以在Node-RED中创建Web服务器,当用户有建议时,可以通过HTTP客户端向Web服务器提交请求,由Node-RED处理。二、相关知识Node-RED中的邮箱控件Node-RED的输出邮箱控件,把msg.payload作为邮件内容,把msg.topic作为邮件主题。消息接收者可以在节点中配置,如果它是空白的,那么应该使用msg.to来设置它。消息的属性如果留下空白,也可以指定msg.cc(转发的收件箱地址)属性。注意,使用SMTP的SSL端口465。邮箱的IMAP和SMTP服务IMAP是一种电子邮件接收的协议,用于管理和检索来自接收服务器的电子邮件消息。SMTP是一种电子邮件发送的协议,可以使用SMTP从邮件客户端(如QQ邮箱)向接收电子邮件服务器发送、中继或转发邮件。SMTP中继服务可以帮助用户发送电子邮件,而不需要建立自己的SMTP服务器。二、相关知识以QQ邮箱为例,设置IMAP(接收)/SMTP(发送)服务。需要保证IMAP/SMTP服务这一项是开启的,如图4-29所示。如图4-30所示,成功开启后,会给一个授权码,需要记住。如果忘记也没关系,可以再次生成。上述配置的IMAP和SMTP中继服务,会在Node-RED中的接收和发送邮件节点用到,用来实现接收邮件和发送邮件功能。图4-29QQ邮箱的IMAP/SMTP服务图4-30IMAP/SMTP服务的授权码三、任务实施实施设备部署了AndroidStudio和Node-RED开发环境的计算机。实施过程1.APP设计APP设计里,需要用到OkHttp框架和对话框的知识。在ThirdActivity.java中,针对btn32进行设计。(1)对话框。已经添加viewBinding框架,需要在第三个页面编写btn32按钮的事件监听方法。binding3.btn32.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){finalEditTextet=newEditText(ThirdActivity.this);et.setText("很好");AlertDialogalertDialog=newAlertDialog.Builder(ThirdActivity.this).setTitle("请提交意见建议").setView(et).setPositiveButton("确定",newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){textSuggest=et.getText().toString();Post_as();}}).setNegativeButton("取消",null).show();}})三、任务实施前面需要定义变量:privateStringtextSuggest;点击“确定”按钮后,调用Post_as()函数,将文本框的内容textSuggest以post的方式、HTTP请求提交给后台:11:1880/APP_feedback。(2)异步请求Post_as()函数。所谓异步请求,就是把请求加入enqueue(队列)中,等待执行。接下来,我们在异步请求函数Post_as()中使用POST方法,提交异步请求,代码如下://异步请求函数privatevoidPost_as(){//创建表单FormBodyformBody=newFormBody.Builder().add("username",).add("feedback",textSuggest).build();//将表单数据放入request中,通过post方法提交Requestrequest=newRequest.Builder().url("11:1880/APP_feedback").post(formBody).build();//将客户端加入队列中,会自动在子线程中运行,返回有2种情况:失败或者有响应okHttpClient.newCall(request).enqueue(newCallback(){@OverridepublicvoidonFailure(@NonNullCallcall,@NonNullIOExceptione){e.printStackTrace();}三、任务实施如果没有收到response,那么不做处理;如果收到response,那么Toast出后台响应的数据部分。@OverridepublicvoidonResponse(@NonNullCallcall,@NonNullResponseresponse)throwsIOException{//获取响应的数据部分Stringresult=response.body().string();//在主线程中Toast出来runOnUiThread(newRunnable(){@Overridepublicvoidrun(){Toast.makeText(ThirdActivity.this,"后台回复:"+result,Toast.LENGTH_SHORT).show();}});}});}三、任务实施其中,11为Node-RED所部署的电脑在局域网中的IP地址。如图4-31所示,查看IP地址的方法:cmd命令行。输入:ipconfig。至此,APP设计就完成了,结构如图4-32所示。图4-31查看IP地址图4-32APP结构三、任务实施2.Node-RED流程设计(1)测试打印APP提交的表单信息。在cmd命令行,输入:node-red。启动Node-RED。注意不要关闭cmd。在NR中,添加一个httpin节点和一个debug节点,连接起来。httpin是一个提供Web服务的HTTP端点(HTTP服务器),供APP访问。如图4-33所示,配置httpin节点,请求方式为POST;URL的后缀为/APP_feedback,完整的URL为11:1880/APP_feedback。debug节点直接打印消息内容,即httpin节点(HTTP服务器)收到的消息内容。图4-33编辑httpin节点三、任务实施部署流程2,运行APP。当APP提交反馈意见“很好!!!”时,Node-RED的debug打印内容如图4-34所示。图4-34表明:Node-RED成功收到APP的HTTP客户端POST的数据,这正是APP代码的2个表单项:图4-34Node-RED接收到HTTP请求//创建表单FormBodyformBody=newFormBody.Builder().add("username",).add("feedback",textSuggest).build();三、任务实施(2)Web展示APP提交的表单信息。在Web页面显示APP提交的表单内容是较为容易的,回顾之前的JSON解析知识即可完成。设计dashboard,添加页面(菜单)“实时反馈与建议”,如图4-35所示,添加一个组“反馈与建议”,组里面添加2个“text”节点作为组件。2个text节点的配置如图4-36所示。图4-35流程中添加反馈与建议部分图4-36编辑text节点三、任务实施查看Web页面,如图4-37所示。(3)Web服务器给APP发回response。如图4-38所示,在流程中增加一个“change”节点和一个“httpresponse”节点。httpresponse节点将响应(response)送回提交请求(request)的HTTP客户端。图4-37查看Web页面图4-38流程中设定响应内容图4-39编辑change节点change节点配置如图4-39所示。三、任务实施httpresponse节点按默认设置即可,如图4-40所示。结果如图4-41所示:APP提交之后,会Toast从后台response的内容。图4-40编辑httpresponse节点图4-41APP接收到response三、任务实施在流程中添加发送邮件节点,如图4-42所示。如果没有这个节点,那么需要安装,如图4-43所示。图4-42添加发送邮件节点图4-43安装email节点三、任务实施发送邮件节点配置,包括收件箱地址、邮件服务器和端口号、发件箱地址和授权码,如图4-44所示。部署流程,查看收件箱是否收到邮件,