教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

web前端開發(fā)培訓(xùn)之如何實現(xiàn)點對點隨機匹配聊天

更新時間:2016年10月13日10時44分 來源:傳智播客前端與移動開發(fā)學(xué)院 瀏覽次數(shù):

真心佩服那些可以經(jīng)常發(fā)布筆記的人，其實我也想經(jīng)常發(fā)來的，奈何技術(shù)不夠加上懶，要向大神們多多學(xué)習(xí)了，前段時間有用bomb平臺自帶的socket寫一個聊天室，其實基本就是改了改它的demo，這次想實現(xiàn)一個隨機私聊，所以自己基于node 和 socket.io 來搭服務(wù)，當(dāng)然，第一次用node做東西玩，雖然做的不好，但是也蠻分享下哈。
    下面是demo地址，可以自己開兩個網(wǎng)頁和自己聊天看效果哦~

    基于node和socket的隨機匹配聊天
    先說說用到的東西， node 用來做后臺服務(wù)，express 用來托管靜態(tài)資源，然后socket.io 用來傳送聊天數(shù)據(jù)。接下來說說思路，其實用socket.io來傳數(shù)據(jù)是很簡單的一件事情，我們只需要再前端頁面引入 socket.io.js  然后再node端也require('socket.io')，把它在后端跑起來，那么前端就可以通過如下代碼來發(fā)送或者接收信息。//前端
  1. socket = io.connect('ws://'+'服務(wù)器ip');
  2. socket.emit('msg',{msg:'前端要發(fā)送的信息'});//要發(fā)送的信息（以對象的形式發(fā)送）
  3. socket.on('msg2',function(data){
  4.     ...
  5.     //這里的data是后端傳過來的信息
  6. })
  8. //后端
  9. socket.on('msg',function(data){
  10.     var data = data; //這里的data就是前端傳過來的數(shù)據(jù)，即{msg:'前端要發(fā)送的信息'}
  11.     console.log(data.msg) // 打印出 “前端要發(fā)送的信息”
  12. })
  13. //同理，后端要傳信息給前端也是一樣
  14. socket.emit('msg2',{msg:'后端要發(fā)送的信息'})

    我們來看后端怎么把socket跑起來
  1. var express = require('express');
  2. var app = express();
  3. var http = require('http').Server(app);
  4. var io = require('socket.io')(http);
  5. io.on('connection', function(socket){ //當(dāng)前端執(zhí)行 socket = io.connect('ws://'+host); 的時候，此處的io會監(jiān)聽到connection事件
  6.         socket.on('msg',function(data){
  7.                 io.emit('onlineCount',freeList)
  8.                 //如果直接用io.emit來發(fā)送數(shù)據(jù)的話，這代表廣播的形式，就是當(dāng)前所有打開服務(wù)的前端頁面都會收到這條消息。
  9.         
  10.             socket.emit('welcome',{msg:'歡迎...'})//這里將給當(dāng)前連接的頁面發(fā)送一個歡迎的對象數(shù)據(jù)
  11.         })
  12.         socket.on('disconnect',function(){
  13.                 //當(dāng)前端頁面關(guān)閉，或者失去連接時,后端會接收到disconnect事件
  14.             
  15.         })
  17. })
  18. http.listen(4000, function(){
  19.         console.log('listening on *:4000');
  20. });

    當(dāng)然不僅如此，因為websocket協(xié)議，是在瀏覽器和服務(wù)器之間建立了一個長鏈接來相互傳輸數(shù)據(jù)，對服務(wù)器而言，如果打開了好幾個頁面，那么就有好幾個socket實例，每個建立連接的前端頁面都會有一個socket實例，這樣就為接下來的點對點私聊提供了思路。當(dāng)然，我們也可以通過直接廣播來傳送信息，不過這適用于聊天室情景。
    那如何實現(xiàn)點對點呢，之前說了，每個建立連接的頁面都會產(chǎn)生一個socket實例，那么我們只需要后端在接收消息的同時，判斷該socket實例是和哪個個實例在聊天，只把消息發(fā)送給另一個匹配的socket實例就好了。簡單來說就像寫信一樣，我把消息發(fā)送給后端，然后告訴后端，這個消息是給xxx的，然后后端找到xxx對應(yīng)的socket實例，將消息發(fā)給他就好了。
  1. //前端
  2. window.id = new Date().getTime()+""+Math.floor(Math.random()*899+100);
  3. //每次登錄，獲取一個唯一的用戶id
  4. socket = io.connect('ws://'+host);
  5. socket.emit('newUser',{ user_name : name, user_id : id})
  6. //建立連接后，將我的用戶名和id都傳給后端
  8. //后端
  9. socket.on('newUser',function(data){
  10.                 var nickname = data.user_name,
  11.                         user_id = data.user_id;
  12.                 userServer[user_id] = socket;
  13.                 //后端接收后，將該用戶socket保存在一個對象里，key值為id，value就是這個用戶的socket
  14.    
  15. })
    通過上面的代碼，后端得到了一個userServer的對象，里面是每個連接socket和其id的對應(yīng)值，這樣，就可以通過每次發(fā)送信息時，附帶要接收對象的id來達到點對點的數(shù)據(jù)傳輸。
    接下來就是數(shù)據(jù)處理咯，如何取到對方的id啊等等，鑒于我表達能力有限，加上懶，就不啰嗦啦~~ 代碼我都托管在github歡迎自己下下來看咯~



本文版權(quán)歸傳智播客web前端開發(fā)培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：傳智播客web前端開發(fā)培訓(xùn)學(xué)院
首發(fā)：http://www.xamj520.com/web/
0 分享到：
和我們在線交談！