Web端實時通信解決方案

在web開發中常常會遇到前後端通信的情況出現,甚至是雙向通信,類似於聊天室的功能,那麼今天的主角就是Socket.IO

什麼是Socket.IO?

官網:https://socket.io/

Web端實時通信解決方案

github地址:https://github.com/socketio/socket.io

其他語言的客戶端實現,由社區維護

  • Java:https://github.com/socketio/socket.io-client-java
  • C ++:https://github.com/socketio/socket.io-client-cpp
  • Swift:https://github.com/socketio/socket.io-client-swift
  • Dart:https://github.com/rikulo/socket.io-client-dart
  • Python:https://github.com/miguelgrinberg/python-socketio
  • .Net:https://github.com/Quobject/SocketIoClientDotNet

Socket.IO 是一個面向實時 web 應用的 JavaScript 庫。它使得服務器和客戶端之間實時雙向的通信成為可能。他有兩個部分:在瀏覽器中運行的客戶端庫,和一個面向Node.js的服務端庫。兩者有著幾乎一樣的API。像Node.js一樣,它也是事件驅動的,Socket.IO 主要使用WebSocket協議,儘管它可以被用作WebSocket的包裝庫,它還是提供了許多其它功能,比如廣播至多個套接字,存儲與不同客戶有關的數據,和異步IO操作。

優勢

Socket.IO 會自動選擇合適雙向通信協議,僅僅需要程序員對套接字的概念有所瞭解。

劣勢

Socket.io並不是一個基本的、獨立的、能夠回退到其它實時協議的WebSocket庫,它實際上是一個依賴於其它實時傳輸協議的自定義實時傳輸協議的實現。該協議的協商部分使得支持標準WebSocket的客戶端不能直接連接到Socket.io服務器,並且支持Socket.io的客戶端也不能與非Socket.io框架的WebSocket或Comet服務器通信。因而,Socket.io要求客戶端與服務器端均須使用該框架。

使用示例

服務端:

Web端實時通信解決方案

socketio服務端示例

客戶端:

Web端實時通信解決方案

socketio客戶端示例

運行客戶端和服務端之後會得到如下結果

客戶端會打印接受到的消息hello對象

Web端實時通信解決方案

客戶端結果

服務端也會接收到客戶端發送的消息

Web端實時通信解決方案

服務端結果

發送和接收事件

Socket.IO允許您發出和接收除connect,message和disconnect之外的自定義事件

// note, io(<port>) will create a http server for you/<port>

var io = require('socket.io')(80);

io.on('connection', function (socket) {

io.emit('this', { will: 'be received by everyone'});

socket.on('private message', function (from, msg) {

console.log('I received a private message by ', from, ' saying ', msg);

});

socket.on('disconnect', function () {

io.emit('user disconnected');

});

});

廣播消息

要廣播,只需添加一個broadcast標誌emit和send方法調用。廣播意味著向除了啟動它的套接字之外的所有人發送消息。

服務端

var io = require('socket.io')(80);

io.on('connection', function (socket) {

socket.broadcast.emit('user connected');

});

像使用WebSocket一樣來使用它

只需利用send並傾聽message事件

服務端

var io = require('socket.io')(80);

io.on('connection', function (socket) {

socket.on('message', function () { });

socket.on('disconnect', function () { });

});

客戶端

<script>

var socket = io('http://localhost/');

socket.on('connect', function () {

socket.send('hi');

socket.on('message', function (msg) {

// my msg

});

});

總結

Socket.IO設計的目標是構建各端的實時應用,如實時分析系統、二進制流數據處理應用、在線聊天室、在線客服系統、評論系統、WebIM等。目前已經兼容主流的瀏覽器,它實現了實時、雙向、基於事件的通訊機制,它解決了實時的通信問題,並統一了服務端與客戶端的編程方式。啟動了Socket以後,就像建立了一條客戶端與服務端的管道,兩邊可以互通有無。它還能夠和Express.js提供的傳統請求方式很好的結合,即可以在同一個域名,同一個端口提供兩種連接方式。因此在Web開發中可以使用它來完成很多實時的複雜操作,打造更加優雅的用戶體驗。


分享到:


相關文章: