Socket.IO是一個基于WebSocket的實時通信庫，在主流平臺都有很好的支持，此文主要是通過一個小例子來演示Socket.IO的使用。
基礎環境搭建
新建一個文件夾（JS工程），創建一個package.json，復制以下內容并保存。
{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": {}}然后執行npm命令，安裝我們需要的依賴（Express和Socket.IO）， 請確保你電腦已經有node環境
在項目根目錄也就是package.json所在的目錄在終端執行以下命令
npm install --save express@4.10.2npm install --save socket.io
進度條讀完后會多這么一個文件夾，此時Express和Socket.IO就已經安裝好了，這和iOS的Cocopods差不多，以模塊化進行加載。
然后新建一個index.js作為服務端，再建一個index.html作為客戶端。（為了方便演示，我這里有兩個客戶端，一個是iOS端，一個是瀏覽器端）
index.html
這也是官方Demo的演示界面，UI上沒做修改
代碼如下
<!doctype html><html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </body></html>index.js
var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);app.get('/',function(req,res){ res.sendfile(__dirname + '/index.html');});http.listen(3000,function () { console.log('listien 3000');});開啟了一個Server，監聽3000端口，然后回到項目根目錄，在終端輸入node index.js
如果出現listen 3000則表明服務開啟成功了，此時在瀏覽器訪問http://localhost:3000 就能看到index.html頁面了
iOS客戶端的集成
新建一個iOS工程，在終端cd到項目根目錄創建一個Podfile文件
vim Podfile
復制以下內容
use_frameworks!target 'SocketIO_Chat_Example' do #項目名 pod 'Socket.IO-Client-Swift', '~> 8.2.0'end
保存退出，執行命令安裝依賴
pod install or pod install --verbose --no-repo-update
請確保已經有cocopods環境
iOS端的UI
使用Socket.IO
此時我們的客戶端和服務端都已經有了Socket.IO的環境了，接下來就是使用它進行聊天了。
Socket.IO中事件的處理主要通過這兩個方法來實現的
on(_ event: String, callback: NormalCallback)emit(_ event: String, _ items: AnyObject...)
on方法為接收事件的方法，emit為發送事件的方法
我們的需求是讓瀏覽器和iOS客戶端進行單聊
服務端的處理
要想發送到指定的客戶端，需要知道當前客戶端的id（Socket.IO的id，例：3t60BArlK47a2fA-AAAd），但是客戶端并不清楚，客戶端只知道我們自己定義的id,所以我們要將Socket.IO的Id和我們自己定義的id綁定并存儲起來。
var socketArray = new Array();io.on('connection', function(socket){ var islogin = false; console.log('**********新加入了一個用戶*********',socket.id); socket.on('login',function (userId) { if(islogin) return; socket.userId = userId; socketArray.push(socket); islogin = true; }); socket.on('privateMessage',function (data) { console.log(data); }) socket.on('chat message', function(data){ var to = data.toUser; var message = data.message; for(var i = 0;i<socketArray.length;i++){ var receiveData = socketArray[i]; if (receiveData.userId == to){ io.to([receiveData.socketId]).emit('privateMessage',''+receiveData.userId+'：'+message); } } }); socket.on('disconnect',function () { console.log('***********用戶退出登陸************,'+socket.id); })});客戶端的處理
瀏覽器的處理
<script src="/socket.io/socket.io.js"></script><script src="http://code.jquery.com/jquery-1.11.1.js"></script><script> var socket = io(); socket.emit('login','30621'); $('form').submit(function(){ socket.emit('chat message',{'toUser':'30342','message':$('#m').val()} ); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); socket.on('privateMessage',function (msg) { $('#messages').append($('<li>').text(msg)); });</script>iOS端的處理
iOS在初始化的時候需要一個config字典，config可以配置諸如log日志輸出等設置
- (SocketIOClient *)client{ if (!_client) { NSURL* url = [[NSURL alloc] initWithString:@"http://localhost:3000"]; _client = [[SocketIOClient alloc] initWithSocketURL:url config:@{@"log": @YES, @"forcePolling": @YES}]; } return _client;}- (void)connection{ [self.client on:@"connect" callback:^(NSArray* data, SocketAckEmitter* ack) { NSLog(@"*************/n/niOS客戶端上線/n/n*************"); [self.client emit:@"login" with:@[@"30342"]]; }]; [self.client on:@"chat message" callback:^(NSArray * _Nonnull event, SocketAckEmitter * _Nonnull ack) { if (event[0] && ![event[0] isEqualToString:@""]) { [self.messageArray insertObject:event[0] atIndex:0]; [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop]; } }]; [self.client on:@"privateMessage" callback:^(NSArray * _Nonnull event, SocketAckEmitter * _Nonnull ack) { if (event[0] && ![event[0] isEqualToString:@""]) { [self.messageArray insertObject:event[0] atIndex:0]; [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop]; } }]; [self.client on:@"disconnect" callback:^(NSArray * _Nonnull event, SocketAckEmitter * _Nonnull ack) { NSLog(@"*************/n/niOS客戶端下線/n/n*************%@",event?event[0]:@""); }]; [self.client on:@"error" callback:^(NSArray * _Nonnull event, SocketAckEmitter * _Nonnull ack) { NSLog(@"*************/n/n%@/n/n*************",event?event[0]:@""); }]; [self.client connect];}//按鈕點擊事件- (IBAction)sendMessage:(id)sender { if (self.inputView.text.length>0) { [self.client emit:@"chat message" with:@[@{@"toUser":@"30621",@"message":self.inputView.text}]]; [self.messageArray insertObject:self.inputView.text atIndex:0]; [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop]; self.inputView.text = @""; }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
