一個關於vue+mysql+express的全棧項目(五)------ 實時聊天部分socket.io

1、基於web端的實時通信,咱們都知道有websocket,爲了快速開發,本項目咱們採用socket.io(客戶端使用socket.io-client)node

Socket.io是一個WebSocket庫,包括了客戶端的js和服務器端的nodejs,它的目標是構建能夠在不一樣瀏覽器和移動設備上使用的實時應用。它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各類方式中選擇最佳的方式來實現網絡實時應用,
很是方便和人性化,並且支持的瀏覽器最低達IE5.5 socket.io特色: 實時分析:將數據推送到客戶端,這些客戶端會被表示爲實時計數器,圖表或日誌客戶。 實時通訊和聊天:只需幾行代碼即可寫成一個Socket.IO的」Hello,World」聊天應用。 二進制流傳輸:從1.0版本開始,Socket.IO支持任何形式的二進制文件傳輸,例如:圖片,視頻,音頻等。 文檔合併:容許多個用戶同時編輯一個文檔,而且可以看到每一個用戶作出的修改。
socket.io經常使用事件:
  // 發送給當前客戶端
  socket.emit('hello', 'can you hear me?', 1, 2, 'abc');
  // 發送給全部客戶端,除了發送者
  socket.broadcast.emit('broadcast', 'hello friends!');
  // 發送給同在 'game' 房間的全部客戶端,除了發送者
  socket.to('game').emit('nice game', "let's play a game");
  // 發送給同在 'game1' 或 'game2' 房間的全部客戶端,除了發送者
  socket.to('game1').to('game2').emit('nice game', "let's play a game (too)");
  // 發送給同在 'game' 房間的全部客戶端,包括髮送者
  io.in('game').emit('big-announcement', 'the game will start soon');

2、socket.io和express連接web

const app = express()
//這裏須要使用express對socket.io進行包裝
const server = require('http').Server(app)
const io = require('socket.io')(server)

server.listen(9094, function(){
     console.log('Node app start at port 9094')
})

3、使用socket.ioexpress

1.客戶端代碼
    1).引入客戶端socket.io-client
         import io from 'socket.io-client'
    2).連接服務器
        const socket = io('ws://localhost:9094')
        //ws是websocket的傳輸協議
    3).在客戶端發送一條消息給服務端
        socket.emit('sendmsg', msg)
        //sendmsg是客戶端廣播出去的事件,在服務端能夠監聽到
2.服務端代碼
    io.on('connection', function(socket) {
       //服務端使用socket.on能夠監聽到客戶端發送的事件
       socket.on('sendmsg', function (data) {
          //這裏監聽到後,服務端能夠告訴客戶端本身收到了
          io.emit('recvemsg', chatmsg)
       })
    })
3.客戶端
    socket.on('recvemsg', function (data) {
      //客戶端監聽到服務端的recvemsg
      //........
    })

以上就是socket.io配合express的使用,下面咱們就來看看相似微信等實時聊天的社交軟件的聊天模型是怎麼設計的瀏覽器

相關文章
相關標籤/搜索