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 相关文章推荐
Google官方支持的NodeJS访问API,提供后台登录授权
Jul 29 NodeJs
nodejs实现HTTPS发起POST请求
Apr 23 NodeJs
NodeJs测试框架Mocha的安装与使用
Mar 28 NodeJs
nodejs爬虫遇到的乱码问题汇总
Apr 07 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
nodejs实现的连接MySQL数据库功能示例
Jan 25 NodeJs
Nodejs核心模块之net和http的使用详解
Apr 02 NodeJs
nodejs log4js 使用详解
May 31 NodeJs
NodeJs crypto加密制作token的实现代码
Nov 15 NodeJs
nodejs中使用archive压缩文件的实现代码
Nov 26 NodeJs
nodejs脚本centos开机启动实操方法
Mar 04 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python验证码识别处理实例
2015/12/28 Python
Python Socket使用实例
2017/12/18 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python中的协程深入理解
2019/06/10 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
高中毕业自我鉴定范文
2013/10/02 职场文书
采购员的工作职责
2013/12/26 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
关爱留守儿童标语
2014/06/18 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
大学毕业生个人总结
2015/02/28 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书