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. 最近在找實習工做 個人在線簡歷