nodejs实现聊天机器人功能


Posted in NodeJs onSeptember 19, 2019

技术栈

服务端:

koa、koa-route、koa-websocket、request。

客户端:

html、css、js、websocket。

远程聊天API:

 http://api.qingyunke.com/api.php?key=free&appid=0&msg=msg。

客户端展示

nodejs实现聊天机器人功能

开发步骤

1.在桌面创建bbs文件夹,然后在文件夹内打开cmd,输入:

$ npm init

初始化箱项目,生成package.json包管理文件

2.cmd输入:

$ npm install koa --save

安装koa。

3.cmd输入:

$ npm install koa-route --save

安装koa路由模块。

4.cmd输入:

$ npm install koa-websocket --save

安装koawebsocket模块。

我的package.json:

{
 "name": "bbs",
 "version": "1.0.0",
 "description": "",
 "main": "server.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "node server.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "koa": "^2.8.1",
 "koa-route": "^3.2.0",
 "koa-websocket": "^6.0.0"
 }
}

5.在bbs文件夹中新建server.js,项目启动入口文件。

添加内容如下:

const Koa = require('koa'),
  route = require('koa-route'),
  websockify = require('koa-websocket'),
  http = require('http'),
  app = websockify(new Koa());

app.ws.use(route.all('/', ctx => {
 // websocket作为“ctx.websocket”添加到上下文中。
 ctx.websocket.on('message', message => {
  startRequest(message, ctx);
 });
}));

function startRequest(message, ctx) {
 // 采用http模块向服务器发起一次get请求  
 http.get(`http://api.qingyunke.com/api.php?key=free&appid=0&msg=${encodeURI(message)}`, res => {
  // 防止中文乱码
  res.setEncoding('utf-8');
  // 监听data事件,每次取一块数据
  res.on('data', chunk => {
   ctx.websocket.send(JSON.parse(chunk).content);
  });
 }).on('error', err => {
  ctx.websocket.send('对不起,网络故障了');
 });}

// 监听端口、启动程序
app.listen(3000, err => {
 if (err) throw err;
 console.log('websocket服务器启动在3000端口');
})

假如对server.js还不清楚的,可以留言或者邮件咨询我。

6.在bbs文件夹中新建index.html文件,作为客户端展示文件。

添加内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>实时聊天室</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <div class="box">
  <div class="title">实时聊天室</div>
  <div class="input-box">
   <input class="input" placeholder="你想说什么..." type="text" id="pl" onkeydown="keyEnter()" />
   <div class="send" id="submit">发送</div>
  </div>
  <div class="view" id="ulView">
   <ul id="view"></ul>
  </div>
 </div>
 <script src="index.js"></script>
</body>
</html>

7.在bbs文件夹中新建index.css,客户端的样式。

内容如下:

* {
 padding: 0;
 margin: 0;
 -webkit-user-select: none;
 -moz-user-select: none;
}
html,
body {
 height: 100%;
 width: 100%;
 background-color: #333;
 position: relative;
 font-size: 12px;
}
.box {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #eee;
 width: 320px;
 height: 564px;
 box-sizing: border-box;
}
.title {
 height: 40px;
 line-height: 40px;
 text-align: center;
 background-color: #000;
 color: #fff;
 position: relative;
 font-size: 16px;
}
.input-box {
 margin-top: 10px;
 position: absolute;
 bottom: 0;
 background-color: #fff;
 width: 100%;
 height: 40px;
 line-height: 32px;
 padding: 4px;
 padding-right: 0;
 box-sizing: border-box;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 -ms-align-items: center;
 align-items: center;
 justify-content: space-between;
 border-top: 1px solid #eee;
}
.input {
 vertical-align: top;
 height: 32px;
 line-height: 32px;
 outline: none;
 border: 1px solid #ccc;
 padding: 0 4px;
 box-sizing: border-box;
 flex: 1;
 background-color: #eee;
 border-radius: 4px;
 margin-right: 10px;
 margin-left: 4px;
}
.input:focus {
 border: 1px solid #ccc;
}
.send {
 width: 80px;
 text-align: center;
 height: 32px;
 line-height: 32px;
 cursor: pointer;
 background-color: green;
 color: #fff;
 margin-right: 10px;
 font-size: 14px;
}
.send:active {
 opacity: 0.6;
}
li {
 list-style: none;
 padding: 6px 10px;
 box-sizing: border-box;
}
.my-say {
 text-align: right;
}
.say {
 display: inline-block;
 background-color: #fff;
 font-size: 12px;
 padding: 6px 4px;
 border-radius: 4px;
 margin-top: 1px;
 vertical-align: top;
 max-width: 220px;
}
.computer-say .sayman {
 background-color: #40E0D0;
}
.my-say .sayman {
 background-color: #FFA500;
}
.my-say .say {
 text-align: left;
}
.sayman {
 font-size: 10px;
 display: inline-block;
 height: 30px;
 width: 30px;
 background-color: #ccc;
 border-radius: 50%;
 text-align: center;
 line-height: 30px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 padding: 0 4px;
 box-sizing: border-box;
 margin: 0 4px;
 color: #fff;
}
.view {
 position: absolute;
 top: 40px;
 bottom: 40px;
 left: 0;
 width: 100%;
 padding: 10px 0;
 box-sizing: border-box;
 overflow-y: auto;
}

8.在bbs文件夹中创建index.js文件,作为客户端js处理文件。

内容如下:

let submit = document.getElementById("submit"),
 pl = document.getElementById("pl");
// 很重要 必须写,判断浏览器是否支持websocket
let CreateWebSocket = (() => {
 return (urlValue) => {
  if (window.WebSocket) return new WebSocket(urlValue);
  if (window.MozWebSocket) return new MozWebSocket(urlValue);
  return false;
 }
})()
// 实例化websoscket websocket有两种协议ws(不加密)和wss(加密)
let webSocket = CreateWebSocket(`ws://127.0.0.1:3000`);
webSocket.onopen = evt => {
 addMsg(1, '你好,欢迎进入实时聊天室!')
}
webSocket.onmessage = evt => {
 // 这是服务端返回的数据
 addMsg(1, evt.data);
 submit.innerHTML = '发送';
}
// input事件发送数据
submit.onclick = (e) => {
 if (e.target.innerHTML == '回复中...') {
  return false
 }
 e.target.innerHTML = '回复中...';
 const str = document.getElementById("pl").value;
 webSocket.send(str);
 addMsg(2, str);
}
// 绑定回车事件
function keyEnter() {
 if (event.keyCode == 13) {
  document.getElementById("submit").click();
 }
}
// 添加消息
function addMsg(type, msg) {
 let li = document.createElement('li');
 // 1机器人/2自己
 if (type == 1) {
  li.classList.add('computer-say');
  li.innerHTML = `<span class="sayman">机器人</span><span class="computer say">${msg}</span>`;
 } else {
  li.classList.add('my-say');
  li.innerHTML = `<span class="computer say">${msg}</span><span class="sayman">我</span>`;
  pl.value = '';
 }
 document.getElementById('view').appendChild(li);
 document.getElementById('ulView').scrollTo(0, document.getElementById('view').clientHeight);
}

为了保证服务端包都可以加载进来,可以在bbs文件夹中打开cmd,然后输入:

$ npm install

到这里,程序就已经搭建完成了。

启动程序:

cmd输入:

$ node server.js

nodejs实现聊天机器人功能

这样服务端就已经启动成功了。

直接右键浏览器打开index.html即可愉快地和机器人妹妹聊天了,告别单身狗了....

喜欢的麻烦点赞,谢谢

可以关注下本人博客,本人会坚持时不时更新好的博客给大家哦。

总结

以上所述是小编给大家介绍的nodejs实现聊天机器人功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

NodeJs 相关文章推荐
nodejs 后缀名判断限制代码
Mar 31 NodeJs
轻松创建nodejs服务器(8):非阻塞是如何实现的
Dec 18 NodeJs
详解nodejs与javascript中的aes加密
May 22 NodeJs
详解nodejs中exports和module.exports的区别
Feb 17 NodeJs
nodejs连接mysql数据库简单封装示例-mysql模块
Apr 10 NodeJs
浅析 NodeJs 的几种文件路径
Jun 07 NodeJs
Nodejs实现爬虫抓取数据实例解析
Jul 05 NodeJs
nodejs基础之多进程实例详解
Dec 27 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
Jan 04 NodeJs
nodejs同步调用获取mysql数据时遇到的大坑
Mar 02 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
Nodejs异步流程框架async的方法
Jun 07 NodeJs
图解NodeJS实现登录注册功能
Sep 16 #NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
Sep 16 #NodeJs
nodejs一个简单的文件服务器的创建方法
Sep 13 #NodeJs
nodejs的安装使用与npm的介绍
Sep 11 #NodeJs
5分钟教你用nodeJS手写一个mock数据服务器的方法
Sep 10 #NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 #NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 #NodeJs
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
python实现汉诺塔方法汇总
2016/07/25 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
带你认识Django
2019/01/15 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Django数据库操作之save与update的使用
2020/04/01 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
如何一键升级Python所有包
2020/11/05 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
北京爱情故事观后感
2015/06/12 职场文书
详解NodeJS模块化
2021/06/15 NodeJs