智能机器人问答+群聊
这算是入坑Vue后的第二个练手项目了,是之前四月份就弄完了,一直没法发出来。
今天突然想起来,还是发出来记录一下自己的学习历程。废话不多说,下面看东西。
链接
项目技术栈
- 前端:Vue.js+vue-router+vuex+Sass
- 异步请求:axios+promise
- 后端:express代理请求 CORS解决跨域
功能实现
IP定位 智能机器人问答 群聊
群聊功能的服务端
build/webpack.dev.conf.js里添加
// 搭建一个socket.io服务
const app = require('express')
const server = require('http').Server(app)
const io = require('socket.io')(server)
server.listen(8081)
let oSockets = []
io.sockets.on('connection', socket => {
console.log('用户链接成功')
oSockets.push(socket)
// 群聊
socket.on('sendMsg', data => {
socket.broadcast.emit('receiveMsg', data)
})
// 上线
socket.on('online', data => {
socket.broadcast.emit('online', data)
})
// 断开连接
socket.on('disconnect', () => {
oSockets.filter(item => item !== socket)
console.log('用户离线')
})
})
群聊功能的客户端
components/Chat.vue里添加
import io from 'socket.io-client'
// 建立socket.io通信
const socket = io.connect('http://localhost:8081')
export default {
......
mounted() {
// 监听通信事件
socket.on('online', name => {
if (!name) {
return
}
this.onlineTip = `${name}加入群聊`
this.showTip()
})
socket.on('receiveMsg', data => {
this.messages.push(data)
})
// 发送上线事件
socket.emit('online', this.nickname)
}
......
}
智能问答功能
这里就不贴代码了 可以在进入我的GitHub里项目的src/components/AI.vue查看
其实我这边也是后端代理请求了图灵机器人提供的免费接口,还是很不错的,注册一个账户就能使用他们的开放api了,不过会有个私有的key需要请求的时候作为参数传过去,因为每天限制请求1k次
其他
- vuex虽说是为了中大型项目而生的,这个小项目使用就有点大材小用了,不过也算了解一下vuex,这个模式还是很棒的,公共的状态放在一个store里统一管理,不用再为各个组件之间传值搞得头大
- socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,可以建立与服务器的双向通信,使用emit()和on()方法来发送和监听服务,也易于理解
- express是node上的一个开发框架,通过封装node的二次封装,提供简洁的api,实现路由和中间件的功能
- 最近在找实习工作 我的在线简历