技术栈

服务端:

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

客户端:

html、css、js、websocket。

远程聊天API:

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

客户端展示

开发步骤

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

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

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

喜欢的麻烦点赞,谢谢

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

总结

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

nodejs实现聊天机器人功能的更多相关文章

  1. xcode-server – Xcode服务器在哪里存储机器人?如何将机器人转移到另一台机器上?

    我使用Xcode和Xcode服务器创建了多个机器人.我想备份这些机器人并将其转移到另一台机器上.如何才能做到这一点?

  2. ios – Xcode服务:选择Git Branch

    我开始在小牛身上建立新的Xcode服务.我创建了一个新的机器人–但是我没有要求它应该构建的分支机构?我不仅要建立主人,而且要建立不同的分支.解决方法在当前版本中,当您在Xcode中创建机器人时,它将链接到当前活动的分支.您可以轻松地验证它从Web界面,当您浏览到机器人–>Bot设置.或者,您可以通过Web界面创建机器人,您可以在其中指定分支名称纯文本.

  3. 我们如何在iOS应用程序中集成Captcha?

    我在iOS应用程序中加入了Captcha,但没有找到任何相关的方法.即使我注册了reCAPTCHA,搜索了Captcha的插件是否适用于iOS?我没有发现任何iOS插件.在RND的某个地方,我知道“它不需要移动应用程序”,但客户端希望Captcha在他的应用程序,所以我想知道:>是否可以在iOS应用程序/移动应用程序中集成Captcha:>如果是的话那么那么将它相关的方法是什么呢?

  4. ios – 如何在Xcode中创建机器人?获取“创建机器人需要一个受源代码控制的项目”.

    ]单击取消或配置遥控器会打开我的文件夹的配置,我看到我的遥控器添加得很好.我还尝试使用不同的名称再次添加远程存储库.我该如何前进?解决方法似乎这个问题发生在没有名为“origin”的远程时,因为这就是Xcode正在寻找的东西.当我将我的遥控器重命名为原点时,Xcode停止了抱怨,让我通过XcodeUI添加机器人.

  5. Swift 开发 Uther 小记 - 一个简单的蠢萌机器人

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  6. android – Webview没有在某些机器人上显示Twitter

    这是一个模糊的,可能是硬件相关的错误.我有一个webview试图显示这样的Twitter提要:http://twitter.com/HP该视图在Droid2上工作正常,但在Droid和DroidX上失败.它只显示twitter徽标并永久挂起,而不是显示页面.关于设备:所有运行相同的软件和Android2.2.但是,他们正在运行不同风格的Android2.2.DroidX:2.2.1机器人1:2.2

  7. Lottie动画慢机器人

    我正在使用Airbnb的新库Lottie在我的应用程序中制作动画.动画由70kbJSON文件和328kb图像文件夹组成.这个文件夹中有13个小png.根据GitHub回购的指示,我宣布我的观点是这样的然后,在我调用的相关java类上:但是,我有一个问题.动画很笨拙,而且我的记忆用量在屋顶上跳跃.它从13MB到89,所有这些都发生在主线程上.你能告诉我有没有办法解决这个问题?

  8. 如何录制视频内部发生的事情? (机器人)

    是否可以将Android中某些View中的所有操作记录为视频?也许使用C/C++或其他任何东西?我知道有使用shell记录的方法,但需要root.没有它会更好.我们也将从SDKVersion16开始.解决方法您可以使用javacv库来组合从视图中获取的一组位图;代码看起来像这样:这里有一个关于如何记录的fullexample

  9. 如何找到未翻译的字符串? (机器人)

    我有一个应该支持几种不同语言的应用程序.有时我会忘记为其中一种语言翻译.有没有找到在strings.xml文件之一中没有翻译的字符串的原因?

  10. 如何在android中删除FAB按钮的自动填充?

    我正在使用FAB按钮获取个人资料图片,但它已经有了一些填充.我使用以下代码创建FAB按钮.

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部