使用socket.io搭建一个实时聊天机器人
生活随笔
收集整理的這篇文章主要介紹了
使用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搭建一个实时聊天机器人的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python dataframe 列_p
- 下一篇： LeetCode 2146. 价格范围内