Vue.js + socket.io 搭建智能聊天室

智能机器人问答+群聊

这算是入坑Vue后的第二个练手项目了,是之前四月份就弄完了,一直没法发出来。
今天突然想起来,还是发出来记录一下自己的学习历程。废话不多说,下面看东西。

链接

项目链接
预览链接

项目技术栈

  1. 前端:Vue.js+vue-router+vuex+Sass
  2. 异步请求:axios+promise
  3. 后端: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次

其他

  1. vuex虽说是为了中大型项目而生的,这个小项目使用就有点大材小用了,不过也算了解一下vuex,这个模式还是很棒的,公共的状态放在一个store里统一管理,不用再为各个组件之间传值搞得头大
  2. socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,可以建立与服务器的双向通信,使用emit()和on()方法来发送和监听服务,也易于理解
  3. express是node上的一个开发框架,通过封装node的二次封装,提供简洁的api,实现路由和中间件的功能
  4. 最近在找实习工作 我的在线简历
    原文作者:NiceMing
    原文地址: https://segmentfault.com/a/1190000015213948
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞