久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

nodejs實(shí)現(xiàn)聊天機(jī)器人功能

技術(shù)棧

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、五原網(wǎng)站維護(hù)、網(wǎng)站推廣。

服務(wù)端：

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

客戶端：

html、css、js、websocket。

遠(yuǎn)程聊天API：

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

客戶端展示

nodejs實(shí)現(xiàn)聊天機(jī)器人功能

開發(fā)步驟

1.在桌面創(chuàng)建bbs文件夾，然后在文件夾內(nèi)打開cmd,輸入：

$ npm init

初始化箱項(xiàng)目，生成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,項(xiàng)目啟動(dòng)入口文件。

添加內(nèi)容如下：

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模塊向服務(wù)器發(fā)起一次get請(qǐng)求  
 http.get(`http://api.qingyunke.com/api.php?key=free&appid=0&msg=${encodeURI(message)}`, res => {
  // 防止中文亂碼
  res.setEncoding('utf-8');
  // 監(jiān)聽data事件，每次取一塊數(shù)據(jù)
  res.on('data', chunk => {
   ctx.websocket.send(JSON.parse(chunk).content);
  });
 }).on('error', err => {
  ctx.websocket.send('對(duì)不起，網(wǎng)絡(luò)故障了');
 });}

// 監(jiān)聽端口、啟動(dòng)程序
app.listen(3000, err => {
 if (err) throw err;
 console.log('websocket服務(wù)器啟動(dòng)在3000端口');
})

假如對(duì)server.js還不清楚的，可以留言或者郵件咨詢我。

6.在bbs文件夾中新建index.html文件，作為客戶端展示文件。

添加內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>實(shí)時(shí)聊天室</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <div class="box">
  <div class="title">實(shí)時(shí)聊天室</div>
  <div class="input-box">
   <input class="input" placeholder="你想說(shuō)什么..." type="text" id="pl" onkeydown="keyEnter()" />
   <div class="send" id="submit">發(fā)送</div>
  </div>
  <div class="view" id="ulView">
   <ul id="view"></ul>
  </div>
 </div>
 <script src="index.js"></script>
</body>
</html>

7.在bbs文件夾中新建index.css,客戶端的樣式。

內(nèi)容如下：

* {
 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文件夾中創(chuàng)建index.js文件，作為客戶端js處理文件。

內(nèi)容如下：

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;
 }
})()
// 實(shí)例化websoscket websocket有兩種協(xié)議ws(不加密)和wss(加密)
let webSocket = CreateWebSocket(`ws://127.0.0.1:3000`);
webSocket.onopen = evt => {
 addMsg(1, '你好，歡迎進(jìn)入實(shí)時(shí)聊天室！')
}
webSocket.onmessage = evt => {
 // 這是服務(wù)端返回的數(shù)據(jù)
 addMsg(1, evt.data);
 submit.innerHTML = '發(fā)送';
}
// input事件發(fā)送數(shù)據(jù)
submit.onclick = (e) => {
 if (e.target.innerHTML == '回復(fù)中...') {
  return false
 }
 e.target.innerHTML = '回復(fù)中...';
 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機(jī)器人/2自己
 if (type == 1) {
  li.classList.add('computer-say');
  li.innerHTML = `<span class="sayman">機(jī)器人</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);
}

為了保證服務(wù)端包都可以加載進(jìn)來(lái)，可以在bbs文件夾中打開cmd，然后輸入：

$ npm install

到這里，程序就已經(jīng)搭建完成了。

啟動(dòng)程序：

cmd輸入：

$ node server.js

nodejs實(shí)現(xiàn)聊天機(jī)器人功能

這樣服務(wù)端就已經(jīng)啟動(dòng)成功了。

直接右鍵瀏覽器打開index.html即可愉快地和機(jī)器人妹妹聊天了，告別單身狗了....

喜歡的麻煩點(diǎn)贊，謝謝

可以關(guān)注下本人博客，本人會(huì)堅(jiān)持時(shí)不時(shí)更新好的博客給大家哦。

總結(jié)

以上所述是小編給大家介紹的nodejs實(shí)現(xiàn)聊天機(jī)器人功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

新聞名稱：nodejs實(shí)現(xiàn)聊天機(jī)器人功能
轉(zhuǎn)載來(lái)源：http://sd-ha.com/article2/jsjsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、小程序開發(fā)、定制網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)