使用 Socket.IO 開發聊天室

本文轉載自查看原文 2017-06-23 14:17 5108 Socket.IO/ WebSocket

前言

Socket.IO 是一個用來實現實時雙向通信的框架，其本質是基於 WebSocket 技術。

我們首先來聊聊 WebSocket 技術，先設想這么一個場景：

· 用戶小A，打開了某個網站的充值界面，該界面上有一個付款的二維碼。

· 當小A 用某寶的 APP 掃碼付款之后，網頁要自動跳轉到付款成功的界面。最簡單的方法就是網頁每隔一段時間就請求一次服務器——“怎么樣？那貨付款沒有？”，“怎么樣？還沒付嗎？”，“怎么樣？這次總該付了吧”。

· 當接收到服務端返回確認付款的標識后，頁面再進行跳轉。

這種定時對服務端發送 HTTP 請求的技術也被稱為“輪詢”。輪詢的缺點也顯而易見，短時間內的多次訪問無疑會對服務器造成很大壓力。

　　后來，人們發明了長輪詢技術。這與短輪詢的區別在於，每次瀏覽器請求服務器后，服務器並不會立即返回“用戶還未付款”的結果，而是一直將 HTTP 保持在掛起狀態，只有當用戶付款后才會返回給瀏覽器 “用戶已經付款” 的結果。當然，如果用戶在規定時間內仍未付款還是會斷開此次連接，之后瀏覽器再開始發送下一輪的長連接。相比短輪詢，長輪詢有了一定的優勢，但這還是不夠好。直到 HTML5 里 WebSocket 技術的誕生。

　　WebSocket，即 Web 瀏覽器與 Web 服務器之間的全雙工通信標准。最初 WebSocket 只是作為 HTML5 標准的一部分，而后來卻逐漸變成了獨立的協議標准。一旦瀏覽器與服務器建立起 WebSocket 協議的通信連接，之后所有的通信都依靠該協議進行。不論是服務器還是瀏覽器，任何一方都能向對方發送報文。通信過程中可相互發送 JSON、HTML或圖片等任意格式的數據。

　　關於 WebSocket 的原生 API 如何使用，本文不贅述了。這里主要聊聊關於 Socket.IO 這個庫的使用方式。Socket.IO 與 ws 等其他基於 WebSocket 通信的庫相比，它的好處在於，當瀏覽器支持 WebSocket 技術時它能正常使用 WebSocket 來工作，當瀏覽器不支持 WebSocket 時，它能平穩退化成輪詢進行工作。

首先放出自己做的聊天室 DEMO 源碼，將源碼克隆到本地，執行下面兩個命令：

npm install
npm start

接着用瀏覽器訪問 localhost:8000 即可，實際界面如下圖：

Socket.IO 在客戶端與服務端二者均有一套 API，我們舉幾個常用的進行說明。

服務端

new Server

因為 WebSocket 協議是建立在 HTTP 協議之上的，所以在創建 WebSocket 服務時需要調用 http 模塊並調用其下的 createServer 方法，將生成的 server 作為參數傳入 socket.io 的方法中。

var server = require('http').createServer(),
    io = require('socket.io')(server);

server.listen(8000);

io.onconnection(socket)

io 的 connection 事件表示客戶端與服務器成功建立連接，它會接收一個回調函數，該回調函數會接收一個 socket 參數。

io.on('connection', (socket) => {
    console.log(socket);
});

io.emit(EventName, param1, param2...)

io.emit 方法用於向服務器發送消息，其第一個參數表示自定義的數據名，后面表示需要配合事件傳入的參數。

io.on('connection', (socket) => {
    io.emit('server message', {msg: 'Hello World.'})
});

socket.on(EventName, callback)

socket.on 方法用於接收客戶端發送來的消息，EventName 參數為客戶端自定義的事件名，callback 為回調函數，回調函數接收的參數即客戶端傳遞來的參數。

io.on('connection', (socket) => {
    socket.on('client message', (data) => {
        console.log(data);
    });
});

socket.broadcast.emit()

socket.broadcast.emit() 方法表示向除了自己以外的客戶端發送消息。舉個例子，當我們輸入 “Message” 點擊發送，只需要將 “Message” 通過服務器發送給其他客戶端用於顯示，而本地只需要將 “Message” 通過 js 代碼添加進聊天窗口即可，而不需要經過服務器。

io.on('connection', (socket) => {
    socket.broadcast.emit('server message', {
        msg: 'Hello World.'
    });
});

socket.ondisconnect

socket 的 disconnect 事件表示客戶端與服務端斷開連接。

io.on('connection', (socket) => {
    socket.on('disconnect', () => {
        console.log('連接已斷開...')；
    });
});

客戶端

首先需要引入 socket.io 模塊中的 socket.io.js 文件。

<!Doctype HTML>
<html>
<head>
    <title>Socket.IO chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
</html>

引入成功后，就可能通過 io() 生成客戶端所用的 socket 對象。

var socket = io();

socket.emit(EventName, param1, param2, .....)

socket.emit 方法用於客戶端向服務端發送消息，服務端與之對應的是 socket.on 方法來接收消息。

//客戶端
var socket = io();
socket.emit('client message', {
    msg: 'Hello Server'
});

//服務端
io.on('connection', (socket) => {
    socket.on('client message', (data) => {
        console.log(data.msg); // Hello Server
    });
});

socket.on(EventName)

socket.on 方法用於接收服務端發來的消息

//服務端
io.on('connection', (socket) => {
    io.emit('server message', {
        msg: 'Hello Client'
    });
});

//客戶端
var socket = io();
socket.on('server message', (data) => {
    console.log(data.msg); // Hello Client
});

介紹完 Socket.IO 的 API，下面開始嘗試寫聊天室的 DEMO。

首先創建目錄如下：

其中 server.js 中保存着服務端的代碼，client 文件夾中保存着客戶端代碼，包括 HTML、CSS、JS、圖片等。

編寫 server.js 如下：

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io')(server),
    port = process.env.PORT || 8000;

//通過 express 加載前端部分的靜態資源文件
app.use(express.static(__dirname + '/client'));

io.on('connection', (socket) => {
　　 //通過 socket.id 創建簡易的用戶名
    let user = '游客' + socket.id.substring(0, 6);
    
    //通知用戶進入
    io.local.emit('user conncet', user + '進入聊天室');

    //接收從客戶端發送來的消息，拼上消息發布者的名字后，廣播給其他客戶端
    socket.on('client message', (data) => {
        data.author = user;

        //將消息廣播給除自己以外的客戶端
        socket.broadcast.emit('server message', data);
    });

    //通知用戶離開
    socket.on('disconnect', () => {
        io.local.emit('user disconnect', user + '離開聊天室');
    });
});

server.listen(port, () => {
    console.log('listening on %d...', port);
});

前端部分代碼省略，這里只簡單寫一個發送消息的方法，具體的代碼請參考 DEMO 源碼。

var socket = io();

function sendMsg() {
    var message = document.querySelector('#input');
    
    socket.emit('client message', {
        text: message,
        time: new Date()
    });

    document.querySelector('#content').innerHTML += '<div class="msgList">'+message+'</div>';
}

如上，當運行 server.js 文件后，在瀏覽器地址欄中輸入 localhost:8000 就可以看到聊天室的界面了。這樣我們就完成了一個簡易的聊天室，它包括如下功能：

· 發送/接收消息

· 通知用戶進入/離開

· 為進入聊天室的用戶命名，名稱唯一

有興趣的朋友還可以嘗試自行完成如下功能：

· 用戶登陸

· 查看所有在線用戶

· @ 功能

···

感覺你的瀏覽，希望能有所幫助。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用socket.io實現多房間通信聊天室使用socket.io打造公共聊天室 socket.io入門，簡易聊天室 vue + socket.io實現一個簡易聊天室使用node.js和socket.io實現多人聊天室使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6實現聊天室 9、socket.io,websocket 前后端實時通信,(聊天室的實現) Node.js下基於Express + Socket.io 搭建一個基本的在線聊天室 Socket.IO + Express實現的跨瀏覽器、子域的聊天室基於react+react-router+redux+socket.io+koa開發一個聊天室