当前位置：移动技术网 > IT编程>开发语言>JavaScript > nodejs实现聊天机器人

nodejs实现聊天机器人

2019年09月19日 | 移动技术网IT编程 | 我要评论

技术栈

服务端：

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文件夹中新建文件，作为客户端展示文件。

添加内容如下：

<!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

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

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

喜欢的麻烦点赞，谢谢

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Vue的响应式原理

受现代JavaScript 的限制 (以及废弃 Object.observe)，Vue不能检测到对象属性的添加或... [阅读全文]
PHP+txt聊天室

PHP+txt聊天室最近朋友发了一篇ASP+txt聊天室，非常不爽，我可是支持PHP的啊所以就发了这篇文章由于是... [阅读全文]
教你如何做一个优雅的Ecmascripter /转

看看这些被同事喷的JS代码风格你写过多少殷荣桧JavaScript今天现在写代码比以前好多了，代码的格式都有es... [阅读全文]
Javascript知识点总结（一）

一、走进javascript什么是JS？JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型... [阅读全文]
利用JS来判断输入是否为空以及重复密码是否相同

登录页面HTML如下：<div class="form-group has-feedback"> ... [阅读全文]
Vue入门基础——第一次笔记

Vue.js是什么？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层... [阅读全文]
react+antd 给switch设置初始值变量

在react项目中表单内的switch功能，设置初始值为变量，所以需要在Form.Item 标签上添加一个val... [阅读全文]
@vue/cli 4.4.6解决跨域问题

在前端@vue/cli 4.4.6解决跨域问题，可以通过vue.config.js配置完成例如：需要访问http... [阅读全文]
offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidthdiv{ width: 20px; ... [阅读全文]
vue 性能优化：gzip编译压缩

安装：compression-webpack-pluginnpm install compression-web... [阅读全文]