工具

客戶端： vue-socket.io
服務端：socket.io

安裝

分別npm 安裝，配置代碼看相應文檔，文檔很詳細

思路

1. 私聊
每個用戶登錄成功后則將自己的用戶名或ID總之是一個唯一的變量，作為socket的名字，下面以id舉例，畢竟各個場景下 id基本上都是唯一的，這樣每個用戶登錄后都會得到指定的socket。

//client 登錄成功后 this.$socket.emit('setName',id)//server socket.on('setName',(id)=>{socket.name = id; })

要進行私聊的時候，客戶端要注冊一個接收信息的socket事件，發(fā)送按鈕被點擊后讓服務器觸發(fā)發(fā)送信息的socket事件，但是不加約束的話，每個登錄后的客戶端的都會收到這個發(fā)出的信息，包括自己。下面是重點
那么既然是私聊，當然只希望指定人接收，接下來我們要做的就是
在發(fā)送按鈕點擊的時候，一定要傳入你要發(fā)送信息用戶的id，服務端會根據這個id找到對應的socket，利用這個socket觸發(fā)對應的的socket聊天事件，這樣你發(fā)的信息就只能傳給他了，而且別人看不到

//client 注冊的接收消息事件 sockets:{// 這時候你是接收方rcvMsg(msg){//msg是發(fā)送方放松過來的信息} } //發(fā)送消息 這時候你是發(fā)送方 按鈕的點擊事件，可以傳入一個對象，包括你自己的id,發(fā)送的消息 this.$socket.emit('sendTo',obj);//serversocket.on('sendTo',(obj)=>{let toId = obj.id;//獲取發(fā)送方的id;var toSocket;try {//查找指定socket，推薦使用underscore.js這個工具，toSocket = _.findWhere(io.sockets.sockets, {name: toId});toSocket.emit("rcvMsg", obj.msg);} catch (e) {console.log(`找不到${toName}`);} })

這樣私聊就完成了，其實socket本身就有socket.id作為獨立區(qū)分，有興趣的可以試試，但我感覺還得把這個id存起來，有點麻煩，有合適方案的歡迎評論區(qū)指教。

2. 群聊
其實socket.io官方文檔中的示例已經給了很好的思路，
我大致說一下流程，代碼就不貼了

當用戶加入一個群以后，服務端將其加入以這個群命名的room（不懂得看官網的room API）

加入后，每次在群里發(fā)消息的時候，對消息進行廣播，我們用broadcast，還是貼下代碼把。。。

//這一行代碼就是在指定房間里廣播消息 socket.broadcast.to(groupName).emit("receiveMsg", msg)

相應的客戶端寫好接收就行了。

這樣群聊也完成了

3. 添加好友
和私聊的思路差不多，獲取指定user的id，找到他的socket，給他發(fā)送好友請求就可以了。

總結

以上是生活随笔為你收集整理的H-Chat: socket.io实现私聊，群聊，添加好友的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。