使用socket.io搭建一个实时聊天机器人

一、安装socket.io

npm i socket.io --save

二、使用

第一种：服务端使用原生node

// 创建http服务器
const http = require('http')
var fs = require('fs')
const app = http.createServer()app.on('request', (req, res) => {fs.readFile(__dirname + '/index.html', function (err, data) {if (err) {res.writeHead(500)return res.end('Error loding!')}res.writeHead(200)res.end(data)})
})app.listen(3000, () => {console.log('服务器启动成功，正在监听3000端口...')
})
const io = require('socket.io')(app,  { cors: true }) // cors: true 表示允许跨域
// socket.emit() 表示发送某个事件
// socket.on() 表示监听某个事件
// 监听了用户连接的事件
io.on('connection', socket => {console.log('新用户连接了！')// socket.emit() 标识给浏览器发送数据// 参数1： 事件的名字socket.emit('send', { name: 'zep' })
})

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index2</title>
</head>
<body><h2>哈哈哈哈</h2><script src="/socket.io/socket.io.js"></script><script>// 连接socket服务var socket = io.connect('ws://localhost:3000')// 监听send事件，得到服务器返回的数据socket.on('send', (data) => {console.log(data);})</script>
</body>
</html>

第二种：服务端使用express

var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server, { cors: true })server.listen(3000, () => {console.log('服务器启动成功，正在监听3000端口...')
})app.get('/', function (req, res) {res.sendFile(__dirname + '/index.html')
})io.on('connection', function (socket) {console.log('新用户连接了！')socket.emit('send', { name: 'zep' })socket.on('other', function (data) {console.log(data);})
})

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index2</title>
</head>
<body><h2>哈哈哈哈</h2><script src="/socket.io/socket.io.js"></script><script>// 连接socket服务var socket = io.connect('ws://localhost:3000')// 监听send事件，得到服务器返回的数据socket.on('send', (data) => {console.log(data);})socket.emit('other', { age: 22 })</script>
</body>
</html>

三、案例：聊天机器人（结合天行机器人api）

1. 使用express搭建后端服务器（结合socket.io）

var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server, { cors: true })
const axios = require("axios");
server.listen(3000, () => {console.log('服务器启动成功，正在监听3000端口...')
})app.get('/', function (req, res) {res.sendFile(__dirname + '/index.html')
})async function sendToRobot(data) {let response = await axios({method: "GET",url: 'http://api.tianapi.com/txapi/robot/index',params: {key: '5fb41161af56441feef854fc',question: data}})console.log(typeof (response.data))console.log(response.data.newslist[0].reply)return response.data
}io.on('connection', function (socket) {console.log('新用户连接了！')socket.on('send',async function (data) {// 给天行聊天机器人接口发送请求let response = await axios({method: "GET",url: 'http://api.tianapi.com/txapi/robot/index',params: {key: '5fb41161aff1256441d57eef854fc',question: data}})const newData = {// msg: data.msg + '？？？',msg: response.data.newslist[0].reply,timestamp: Date.now()}socket.emit('msg', newData)})
})

2. 在vue前端中使用：

<template><div class="user-chat"><!--导航栏--><van-nav-barclass="app-nav-bar"title="小智同学"left-arrow@click-left="$router.back()"/><!--消息列表--><van-cell-group class="message-list" ref="message-list">
<!--      <div v-for="(item, index) in messages" :key="index">--><van-cell class="message-item" center v-for="(item, index) in messages" :key="index"><div class="message-item-right" v-if="index % 2 ===0"><div class="message-item-text">{{ item.msg }}</div><van-imagewidth="40"height="40"roundsrc="https://img01.yzcdn.cn/vant/apple-1.jpg"/></div><div class="message-item-left" v-else><van-imagewidth="40"height="40"roundsrc="https://img01.yzcdn.cn/vant/cat.jpeg"/><div class="message-item-text">{{ item.msg }}</div></div></van-cell>
<!--      </div>--></van-cell-group><!--发送消息--><van-cell-group class="send-message-wrap"><van-field v-model="message"placeholder="请输入消息":border="false"/><van-button size="small"type="primary"class="sendBtn"@click="onSend">发送</van-button></van-cell-group></div>
</template><script>
import io from 'socket.io-client'
import { setItem, getItem } from '../../utils/storage'export default {name: 'UserChat',data () {return {message: '',socket: null, // WebSocket通信对象messages: getItem('chat-messages') || [] // 消息列表}},watch: {// 监视messages，只要messages的值发生改变就把当前的messages存到本地存储中messages () {setItem('chat-messages', this.messages)// 如果你要在操作数据之后立即操作数据影响的视图DOM，// 那么最好放在$nextTick()中// 数据改变影响视图更新这件事不是立刻的this.$nextTick(() => {// 每次有新消息时，让消息列表滚动到最底部this.scrollToBottom()})}},mounted () {this.scrollToBottom()},created () {const socket = io('ws://localhost:3000')this.socket = socketwindow.socket = socketsocket.on('connect', function () {console.log('连接建立成功了！')})// 监听 message 事件，接收服务端消息socket.on('msg', (data) => {// 把对方发给我的消息放到数组中this.messages.push(data)console.log(data)})socket.on('disconnect', function () {console.log('断开连接了')})},methods: {onSend () {// 请求发送消息const data = {msg: this.message,timestamp: Date.now()}this.socket.emit('send', data)// 把用户发出去的消息存储到数组中this.messages.push(data)// 清空输入框的内容this.message = ''},scrollToBottom () {const list = this.$refs['message-list']list.scrollTop = list.scrollHeight}}
}
</script><style scoped lang="less">.send-message-wrap {position: fixed;bottom: 0;left: 0;right: 0;display: flex;align-items: center;padding: 0 10px;}.sendBtn {width: 20%;}.message-list {position: fixed;left: 0;right: 0;top: 46px;bottom: 44px;overflow-y: auto;}.message-item {color: red;display: flex;align-items: center;.message-item-right {display: flex;align-items: center;justify-content: flex-end;}.message-item-left {display: flex;align-items: center;justify-content: flex-start;}}.message-item-text {margin: 0 15px;}
</style>

使用socket.io搭建一个实时聊天机器人相关推荐

使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作 ...
windows 10使用Pycharm从0到1搭建一个QQ聊天机器人保姆级教程【2023最新版】
文章目录选择Python环境安装nb-cli 配置Go-cqhttp 大工告成! 选择Python环境 Nonebot2官方说,python版本要大于3.8,推荐大家使用虚拟环境,在Poetry. ...
14级团队学习成果汇报 -- 利用express+socket.io搭建简易版聊天室
周鹏,14级数理系,信息与计算科学大三学生.在LSGO软件技术团队负责前端部分,本图文是他的一个完整作品,代码可在Github上下载.
Nodejs+socket.io 搭建个人的网页聊天室
Nodejs+socket.io 搭建个人的网页聊天室最近看到别人搭建了自己的实时聊天室便产生了兴趣,于是乎自己也着手搭建了一个.在socket这里我选用了socket.io这个模块,在网上看了很多 ...
socket.io搭建聊天室
文章目录 1.定义 2.特点 3.实例 1.定义 socket.io是一个可以在客户端和服务器之间实现低延迟, 双向和基于事件的通信的库.它建立在websocket之上,且当浏览器不支持web ...
使用nettyio+socket.io搭建简单的网页聊天室
使用nettyio+socket.io搭建简单的网页聊天室 1 目录结构 2 maven 依赖配置 <project xmlns="http://maven.apache.org/PO ...
使用socket.io做一个简单的WEB聊天室
使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
利用socket.io+nodejs打造简单聊天室
代码地址如下: http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...

使用socket.io搭建一个实时聊天机器人

一、安装socket.io

二、使用

第一种：服务端使用原生node

前端：

第二种：服务端使用express

前端：

三、案例：聊天机器人（结合天行机器人api）

1. 使用express搭建后端服务器（结合socket.io）

2. 在vue前端中使用：

使用socket.io搭建一个实时聊天机器人相关推荐

最新文章

热门文章

使用socket.io搭建一个实时聊天机器人

一、安装socket.io

二、使用

第一种：服务端使用原生node

前端：

第二种： 服务端使用express

前端：

三、案例 ： 聊天机器人（结合天行机器人api）

1. 使用express搭建后端服务器（结合socket.io）

2. 在vue前端中使用：

使用socket.io搭建一个实时聊天机器人相关推荐

最新文章

热门文章

第二种：服务端使用express

三、案例：聊天机器人（结合天行机器人api）