nodejs实现聊天机器人功能

2024-11-29 18:07:42

技术栈

服务端：

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实现聊天机器人功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Nodejs实现多房间简易聊天室功能

1.前端界面代码前端不是重点,够用就行,下面是前端界面,具体代码可到github下载. 2.服务器端搭建本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制,可将两种服务搭建在同一个端口下. 1.包描述文件:package.json,这里用到了两个依赖项,mime:确定静态文件mime类型,socket.io:搭建websocket服务,然后使用npm install 安装依赖 { "name": "chat_room",
Nodejs之TCP服务端与客户端聊天程序详解

TCP是用来计算机之间进行通信的,通过编写客户端和服务端聊天的代码,对于服务器与客户端的工作步骤有了深刻的了解,在这里根据了不起的Node.js一书来总结一下. TCP聊天程序需要用到Nodejs中的net模块,net模块是对TCP的封装,用于创建TCP服务端与客户端的. 服务器端 count:连接的客户端个数: users:用于存储客户端用户昵称的对象,对象值都为该客户端的Socket,Socket是一个接口,用于服务端与客户端通信. net.createServer:是用来创建TCP服务器,
nodejs实现的一个简单聊天室功能分享

今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码首先我们通过express来托管网站,并附加到socke
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

一,利用Node搭建静态服务器这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,
nodejs基于WS模块实现WebSocket聊天功能的方法

本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法.分享给大家供大家参考,具体如下: WebSocket 模块众多,我选择了一个较为简单的模块进行了实现. 工具:Sublime 技术:Node.js 引用模块 ws 最终效果如下本来打算制作网络画板,因为工作忘记了,这里就简单实现了群聊功能没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是 node 导入模块问题了) 介绍一下安装模块: 找到安装node 目录,进入到 npm 目录下运行
nodejs+express搭建多人聊天室步骤

前言本文主要是笔者在学习node的时候,作为练手的一个小项目,花了几天空余时间,边码边写教程的一个过程.适用于对node理论知识看的多,实战少的同学,那么现在就让我们开始吧! 准备工作新建一个文件夹 chatroom 在终端输入以下命令,按照步骤npm(没装过的去官网安装下node和npm)会自动给你生成一个package.json文件安装express和socket.io package.json文件如下: //package.json { "name": "chat
nodejs实现聊天机器人功能

技术栈服务端: 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 ko
基于Ajax的聊天机器人功能的实现

🤖️ 哈喽!大家好呀.如果无聊就和机器人聊聊天吧在初步进入Ajax学习就忍不住给大家分享今天的劳动成果啦先来看看效果图: 功能实现: 点击发送按钮事件将用户输入的内容渲染到页面中点击回车键将表单的内容渲染到页面中获取机器人的内容渲染到页面中播放机器人的内容先来看看项目的总体结构引入相关的文件: html框架比较简单 <div class="wrap">  <div class="header"> <h3>小思同学</h3> <img src="img/person01.png" alt="icon" /> </div>  <div class="main"> <ul class="talk_list" style="top: 0px;" id="talk_list"> <li class="l
Python使用 TCP协议实现智能聊天机器人功能

编写聊天程序的服务端代码和客户端代码.完成后,先启动服务端代码,然后启动客户端程序输人问题,服务端可以返回相应的答案.要求服务端代码具有一定的智能,能够根据不完整的问题识别客户端真正要问的问题. 程序运行后界面如下图所示. 源代码: 服务端 Sever.py: from os.path import commonprefix from posixpath import split import socket #建立聊天回复字典 words={'how are you?':'Fine,than
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

概述使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入
nodejs和react实现即时通讯简易聊天室功能

npx create-react-app socketio-demo 进入socketio-demo目录运行eject进行拆包,本项目也可以不拆,这是个人习惯. 注意如果运行eject命令最好在项目初始阶段执行,已经开始编写后不要再使用容易出现bug,新人谨慎使用eject命令 yarn eject 项目拆包后创建服务器文件夹和文件 mkdir server type null>index.js 创建完成后目录如下编写即时通讯(聊天室)后台安装nodejs插件 npm i express
Python基于TCP实现会聊天的小机器人功能示例

本文实例讲述了Python基于TCP实现会聊天的小机器人功能.分享给大家供大家参考,具体如下: 一代码 1.服务端程序 import socket words ={'how are you?':'Fine,thank you.', 'how old are you?':'38', 'what is your name?':'Dong FuGuo', "what's your name?":'Dong FuGuo', 'where do you work?':'SDIBT', 'bye
NodeJS实现一个聊天室功能

看效果一直说我喜欢卖关子,这次直接看效果: 聊天界面(喜欢的可以自己画一个比较逼真的页面) 前文先说一下为什么写这个东西,最近不是在写NodeJS知识点的梳理嘛,但是我发现梳理的过程着实无聊的要死,虽然已经快梳理一半了,只是还没发布,这个不重要,重要的是不做点什么东西确实无聊,所以今天把我做这个的过程记录给你们看一下,喜欢的可以拿去玩玩.实现的功能是可以聊天,可以显示用户自定义的昵称,并且显示发送时间 PS:这个功能如果我们使用webstorm新建一个express app的项目的话,是可以
16行Python代码实现微信聊天机器人并自动智能回复功能

目录一.效果二.项目思路三.代码分析 1.安装和导入模块 2.申请图灵机器人 3.实现机器人功能 4.实现微信功能 5.弹出二维码及循环程序在我们的生活和工作当中,很多时候我们并不能及时地回复消息,尤其是业务比较多的人,客户给我们发消息我们不回又不好,但又没有那么多精力时时回复,这个时候智能机器人就能帮助我们解决很多问题. 像电商类的客服,像大的QQ群/微信群管理员,以及我们打游戏的时候,挂着脚本就行,机器人自动帮你回消息,一时半会儿不会得罪女朋友,哈哈哈! 今天就来教大家一招,16行P
安卓(Android)聊天机器人实现代码分享

今天看到一个ios写的图灵机器人,直接去官网(http://www.tuling123.com/openapi/)看了下API接入,太简单了,就一个get请求~于是乎,写了一个Android版本的机器人,没什么技术含量,但是挺好玩的~刚好昨晚看了自己喜欢的秦时明月,嘿嘿,小貔貅,就是我的机器人宠物啦~ 这是一个安卓智能聊天机器人的源码,采用了仿微信的风格设计,调用的是图灵机器人的API,能够实现智能聊天.讲故事.讲笑话.查天气.查公交等丰富的功能. 先给大家展示效果图: 下面是代码片段,想要源码

nodejs实现聊天机器人功能

相关推荐

随机推荐