首頁 > web前端 > js教程 > node.js + socket.io 實作聊天功能詳解

node.js + socket.io 實作聊天功能詳解

零下一度
發布: 2017-07-02 10:17:12
原創
2202 人瀏覽過

這篇文章主要介紹了node.js + socket.io 實現點對點隨機匹配聊天,具有一定的參考價值,感興趣的小伙伴們可以參考一下

真心佩服那些可以經常發布筆記的人,其實我也想經常發來的,奈何技術不夠加上懶,要向大神們多多學習了,前段時間有用bomb平台自帶的socket寫一個聊天室,其實基本就是改了改它的demo,這次想實現一個隨機私聊,所以自己基於node 和socket.io 來搭服務,當然,第一次用node做東西玩,雖然做的不好,但是也蠻分享下哈。

先說說用到的東西, node 用來做後台服務,express 用來託管靜態資源,然後socket.io 用來傳送聊天資料。接下來說說思路,其實用socket.io來傳資料是很簡單的一件事情,我們只需要再前端頁面引入socket.io.js  然後再node端也require('socket. io'),把它在後端跑起來,那麼前端就可以透過以下程式碼來發送或接收訊息。


//前端
socket = io.connect('ws://'+'服务器ip');
socket.emit('msg',{msg:'前端要发送的信息'});//要发送的信息(以对象的形式发送)
socket.on('msg2',function(data){
  ...
  //这里的data是后端传过来的信息
})
//后端
socket.on('msg',function(data){
  var data = data; //这里的data就是前端传过来的数据,即{msg:'前端要发送的信息'}
  console.log(data.msg) // 打印出 “前端要发送的信息”
})
//同理,后端要传信息给前端也是一样
socket.emit('msg2',{msg:'后端要发送的信息'});
登入後複製

我們來看後端怎麼把socket跑起來


 var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){ //当前端执行 socket = io.connect('ws://'+host); 的时候,此处的io会监听到connection事件
 socket.on('msg',function(data){ 
 io.emit('onlineCount',freeList)
 //如果直接用io.emit来发送数据的话,这代表广播的形式,就是当前所有打开服务的前端页面都会收到这条消息。
 
   socket.emit('welcome',{msg:'欢迎...'})//这里将给当前连接的页面发送一个欢迎的对象数据
 })
 socket.on('disconnect',function(){
 //当前端页面关闭,或者失去连接时,后端会接收到disconnect事件
   
 })

})
http.listen(4000, function(){
 console.log('listening on *:4000');
});
登入後複製

當然不只如此,因為websocket協議,是在瀏覽器和伺服器之間建立了一個長連結來相互傳輸數據,對伺服器而言,如果打開了好幾個頁面,那麼就有好幾個socket實例,每個建立連接的前端頁面都會有一個socket實例,這樣就為接下來的點對點私聊提供了思路。當然,我們也可以透過直接廣播來傳送訊息,不過這適用於聊天室情境。

那如何實現點對點呢,之前說了,每個建立連接的頁面都會產生一個socket實例,那麼我們只需要後端在接收訊息的同時,判斷這個socket實例是和哪個個實例在聊天,只把訊息傳送給另一個符合的socket實例就好了。簡單來說就像寫信一樣,我把訊息傳送給後端,然後告訴後端,這個訊息是給xxx的,然後後端找到xxx對應的socket實例,將訊息發給他就好了。


//前端
window.id = new Date().getTime()+""+Math.floor(Math.random()*899+100);
//每次登录,获取一个唯一的用户id
socket = io.connect('ws://'+host);
socket.emit('newUser',{ user_name : name, user_id : id})
//建立连接后,将我的用户名和id都传给后端

//后端
socket.on('newUser',function(data){
 var nickname = data.user_name,
  user_id = data.user_id;
 userServer[user_id] = socket;
 //后端接收后,将该用户socket保存在一个对象里,key值为id,value就是这个用户的socket
  
})
登入後複製

透過上面的程式碼,後端得到了一個userServer的對象,裡面是每個連接socket和其id的對應值,這樣,就可以透過每次發送訊息時,附帶要接收物件的id來達到點對點的資料傳輸。

接下來就是資料處理咯,如何取到對方的id啊等等,鑑於我表達能力有限,加上懶,就不囉嗦啦~~ 程式碼我都託管在github歡迎自己下下來看咯

以上是node.js + socket.io 實作聊天功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板