WebSocket

websocket可以實現(xiàn)客戶端與服務端數(shù)據(jù)的實時通信。（長連接）

網(wǎng)絡通信過程中的長連接與短連接

HTTP協(xié)議是一款基于短連接模式的協(xié)議。意味著需要通信時，客戶端向服務端發(fā)送連接請求，一旦連接建立，開始通信，接收響應，響應接收完畢后連接將斷開。

短連接模式可以極大的節(jié)省服務端資源（CPU、內(nèi)存、連接數(shù)）。

websocket屬于長連接，意味著需要通信時，客戶端向服務端發(fā)送websocket連接請求，一旦連接建立成功，兩端通信的過程中連接不斷開。這個過程中，雙方都可以自發(fā)的向?qū)Ψ桨l(fā)消息，對方可以實時接收這些消息。

例如：即時通訊、游戲等。

長連接模式可以實現(xiàn)實時通信，但是會長時間占用服務端資源。在做技術選型時可以嘗試使用短連接的http協(xié)議發(fā)送心跳包，模擬長連接的功能。

什么是websocket？

websocket是一種在單個TCP連接上進行**全雙工通信（通信過程中允許兩個方向同時進行數(shù)據(jù)傳輸）**的一種通信協(xié)議。是一款長連接協(xié)議。它具備數(shù)據(jù)包格式小，通信高效、既可以發(fā)送文本，又可以發(fā)送二進制的特點。

如何使用代碼建立websocket連接并實現(xiàn)實時通信？

socket.io

socket.io是一個為瀏覽器與服務器之間提供實時的、雙向的、基于事件通信的網(wǎng)絡通信庫。實現(xiàn)了webosocket協(xié)議，提供了相關API，抹平了一些技術細節(jié)及兼容性。

導入socket.io.js io('ws://ip:port/') //建立websocket連接 require('socket.io') serversocket.on('connection', (client)=>{連接成功 })

建立websocket連接

客戶端

html引入socket.io.js

<script src="socket.io.js"></script>

調(diào)用socket.io提供的方法，試圖建立連接：

<script>// socket:套接字 // 封裝了與服務端進行交互的屬性和方法let socket = io('ws://localhost:3000/'); </script>

服務端

websocket服務是掛載在web服務基礎之上的。也就是說weboscket是內(nèi)嵌在一個express服務內(nèi)部的。express將啟用3000端口提供普通的web服務。具體步驟如下：

新建一個nodejs項目，安裝express、socket.io等模塊。

# 必須進入serversocket項目目錄下，執(zhí)行安裝命令： npm init npm install --save express npm install --save socket.io

新建index.js，引入express、socket.io。

基于socket.io接收客戶端的websocket連接。

// socketserver/index.js const express = require('express'); const app = express(); // 獲取express底層的http服務 const http = require('http').createServer(app); // 加載socket.io模塊時 把路由掛載到底層的的http服務之上 const serversocket = require('socket.io')(http);// 設置public目錄為靜態(tài)資源托管目錄 app.use(express.static('public'));// 監(jiān)聽客戶端的websocket連接，一旦有客戶端連接，就會觸發(fā) // ‘connection’事件，編寫事件處理函數(shù)處理該事件即可。 // 在事件處理函數(shù)中將自動傳入與客戶端交互所需要的socket對象 serversocket.on('connection', (socket)=>{console.log('有客戶端進來了：'+socket.id); })http.listen(3000, ()=>{console.log('server is running...'); })

客戶端與服務端之間進行通信

客戶端向服務端發(fā)消息

客戶端發(fā)送：

let socket = io('ws://localhost:3000/'); // socket.emit(key, value); socket.emit('textmsg', '你瞅啥？');

服務端接收：

serversocket.on('connection', (socket)=>{console.log('有客戶端進來了：'+socket.id);// 通過socket對象接收客戶端發(fā)來的消息// socket.on(key, callback)socket.on('textmsg', function(res){console.log(res);}) })

服務端向客戶端發(fā)消息

服務端：

socket.on('textmsg', function(res){console.log(res);// 給當前socket客戶端回復消息socket.emit('textmsg', '丑你咋地！'); })

客戶端：

let socket = io('ws://localhost:3000/'); socket.on('textmsg', (res)=>{console.log(res); })

服務端向所有客戶端廣播消息

服務端：

serversocket.on('connection', (socket)=>{console.log('有客戶端進來了：'+socket.id);serversocket.emit('textmsg', '內(nèi)容'); // 給所有客戶端都發(fā)消息 })

實現(xiàn)群聊天室

需求如下：

在聊天界面中建立websocket連接。

一個客戶端在消息發(fā)送區(qū)發(fā)送消息，服務端接收消息后把該消息分發(fā)給所有客戶端。

客戶端接收服務端發(fā)回來的消息，打印。

接收到的消息，上屏。

更新當前在線人數(shù)。

在服務端存儲一個全局的變量count。用于保存當前在線人數(shù)，默認值：0。

一旦有客戶端連接進來，count++。

一旦有連接斷開，count--。

一旦服務端count有變化，就向所有客戶端發(fā)個消息，告訴它們最新的count的值，客戶端接收到最新的count后更新界面。

實現(xiàn)登錄業(yè)務。在index.html填寫昵稱后點擊登錄，跳轉(zhuǎn)到chart.html。把用戶昵稱和頭像文件名都傳遞過來。

window.location="chart.html?name=東東&avatar=1.jpg"

在發(fā)消息時，帶著用戶信息一起發(fā)送消息：

emit('textmsg', {name:'zs', avatar:'1.jpg', content:'xxxx'} )

私聊

實現(xiàn)思路：

客戶端發(fā)消息時，除了content、name、avatar之外還需要發(fā)送to（對方的昵稱）

{name: '亮亮',avatar: '16.jpg',content: '你最近還好嗎？我好想你',to: '東東' }

服務端接收消息后，判斷到底給誰發(fā)，需要找到與對方交互時所必須的socket對象（前提是所有用戶連接成功后，把這些socket對象都得存起來）。調(diào)用該socket對象的emit即可完成私聊。

總結(jié)

以上是生活随笔為你收集整理的nodejs和前端基于websocket实现微信群聊与私聊的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。