2. 程式人生 > >基於socket.io即時通訊IM實現，webRTC實現視訊通話

基於socket.io即時通訊IM實現，webRTC實現視訊通話

阿新 • • 發佈：2019-02-18

Socket.io-FLSocketIM-iOS

基於Socket.io iOS即時通訊客戶端 iOS IM Client based on Socket.io

實現功能

  1. 文字傳送
  2. 圖片傳送（從相簿選取，或者拍攝）
  3. 短視訊
  4. 語音傳送
  5. 視訊通話
  6. 其他一些效果（類似QQ底部tabBar,短視訊拍攝等）
  7. 功能擴充套件中。。。。。

先看看實際效果

文字.gif

圖片.gif

定位.gif

語音.gif

IMG_1227.PNG

使用技術

一、socket.io

socket.io是該專案實現即時通訊關鍵所在，非常強大；
Socket.io將Websocket和輪詢 （Polling）機制以及其它的實時通訊方式封裝成了通用的介面，並且在服務端實現了這些實時機制的相應程式碼。

先上程式碼

1.建立socket連線，通過單例管理類FLSocketManager實現
- (void)connectWithToken:(NSString *)token success:(void (^)())success fail:(void (^)())fail {


    NSURL* url = [[NSURL alloc] initWithString:BaseUrl];

    /**
     log 是否列印日誌
     forceNew      這個引數設為NO從後臺恢復到前臺時總是重連，暫不清楚原因
     forcePolling  是否強制使用輪詢
     reconnectAttempts 重連次數，-1表示一直重連
     reconnectWait 重連間隔時間
     connectParams 引數
     forceWebsockets 是否強制使用websocket, 解釋The reason it uses polling first is because some firewalls/proxies block websockets. So polling lets socket.io work behind those.
     來源：https://github.com/socketio/socket.io-client-swift/issues/449
     */
 

    SocketIOClient* socket;
    if (!self.client) {
        socket = [[SocketIOClient alloc] initWithSocketURL:url config:@{@"log": @NO, @"forceNew" : @YES, @"forcePolling": @NO, @"reconnectAttempts":@(-1), @"reconnectWait" : @4, @"connectParams": @{@"auth_token" : token}, @"forceWebsockets" : @NO}];
    }
    else
 
 {
        socket = self.client;
        socket.engine.connectParams = @{@"auth_token" : token};
    }


    // 連線超時時間設定為15秒
    [socket connectWithTimeoutAfter:15 withHandler:^{

        fail();
    }];

    // 監聽一次連線成功
    [socket once:@"connect" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {

        success();
    }];

    _client = socket;
}

這個方法是在使用者登入後呼叫，主要作用是初始化socket連線，關於socket初始化相關引數請參照socket.io文件。

2.監聽伺服器向客戶端傳送的訊息，通過單例管理類FLClientManager進行管理，然後讓代理實現功能
// 收到訊息
    [socket on:@"chat" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {


        if (ack.expected == YES) {

            [ack with:@[@"hello 我是應答"]];
        }


        FLMessageModel *message = [FLMessageModel yy_modelWithJSON:data.firstObject];

        NSData *fileData = message.bodies.fileData;
        if (fileData && fileData != NULL && fileData.length) {

            NSString *fileName = message.bodies.fileName;
            NSString *savePath = nil;
            switch (message.type) {
                case FLMessageImage:
                    savePath = [[NSString getFielSavePath] stringByAppendingPathComponent:[NSString stringWithFormat:@"s_%@", fileName]];
                    break;
                case FlMessageAudio:
                    savePath = [[NSString getAudioSavePath] stringByAppendingPathComponent:fileName];
                    break;
                default:
                    savePath = [[NSString getFielSavePath] stringByAppendingPathComponent:fileName];
                    break;
            }


            message.bodies.fileData = nil;
            [fileData saveToLocalPath:savePath];
        }


        id bodyStr = data.firstObject[@"bodies"];
        if ([bodyStr isKindOfClass:[NSString class]]) {
            FLMessageBody *body = [FLMessageBody yy_modelWithJSON:[bodyStr stringToJsonDictionary]];
            message.bodies = body;
        }

        // 訊息插入資料庫
        [[FLChatDBManager shareManager] addMessage:message];

        // 會話插入資料庫或者更新會話
        BOOL isChatting = [message.from isEqualToString:[FLClientManager shareManager].chattingConversation.toUser];
        [[FLChatDBManager shareManager] addOrUpdateConversationWithMessage:message isChatting:isChatting];


        // 本地推送，收到訊息新增紅點，聲音及震動提示
        [FLLocalNotification pushLocalNotificationWithMessage:message];



        // 代理處理
        for (FLBridgeDelegateModel  *model in self.delegateArray) {

            id<FLClientManagerDelegate>delegate = model.delegate;
            if (delegate && [delegate respondsToSelector:@selector(clientManager:didReceivedMessage:)]) {

                if (message) {
                    [delegate clientManager:self didReceivedMessage:message];
                }

            }
        }
    }];

    // 視訊通話請求
    [socket on:@"videoChat" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {

        UIViewController *vc = [self getCurrentVC];
        NSDictionary *dataDict = data.firstObject;
        FLVideoChatViewController *videoVC = [[FLVideoChatViewController alloc] initWithFromUser:dataDict[@"from_user"] toUser:[FLClientManager shareManager].currentUserID type:FLVideoChatCallee];
        videoVC.room = dataDict[@"room"];
        [vc presentViewController:videoVC animated:YES completion:nil];
        FLLog(@"%@============", data);
    }];

    // 使用者上線
    [socket on:@"onLine" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {

        for (FLBridgeDelegateModel  *model in self.delegateArray) {

            id<FLClientManagerDelegate>delegate = model.delegate;
            if (delegate && [delegate respondsToSelector:@selector(clientManager:userOnline:)]) {

                [delegate clientManager:self userOnline:[data.firstObject valueForKey:@"user"]];
            }
        }
    }];

    // 使用者下線
    [socket on:@"offLine" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {

        for (FLBridgeDelegateModel  *model in self.delegateArray) {

            id<FLClientManagerDelegate>delegate = model.delegate;
            if (delegate && [delegate respondsToSelector:@selector(clientManager:userOffline:)]) {

                [delegate clientManager:self userOffline:[data.firstObject valueForKey:@"user"]];
            }
        }
    }];



    // 連線狀態改變
    [socket on:@"statusChange" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {

        FLLog(@"%ld========================狀態改變", socket.status);
        for (FLBridgeDelegateModel  *model in self.delegateArray) {

            id<FLClientManagerDelegate>delegate = model.delegate;
            if (delegate && [delegate respondsToSelector:@selector(clientManager:didChangeStatus:)]) {

                [delegate clientManager:self didChangeStatus:socket.status];
            }
        }
    }];

- (NSUUID * _Nonnull)on:(NSString * _Nonnull)event callback:(void (^ _Nonnull)(NSArray * _Nonnull, SocketAckEmitter * _Nonnull))callback;
socket.io 提供的事件監聽方法，這裡監聽的事件包括：
- “chat” 接收到好友訊息
- “videoChat” 視訊通話請求
- “onLine” 有好友上線
- “offLine” 有好友離線
- “statusChange” socket.io內部提供的，連線狀態改變

這部分程式碼，有個比較關鍵的需要說明一下，舉個例子，在接收到“chat”事件後，資料庫管理類需要將訊息存放到資料庫，會話列表需要更新UI，聊天列表需要顯示該訊息…也就是該事件需要多個物件響應。對於這種需求最先想到的就是使用通知的功能，畢竟可以實現一對多的訊息傳遞嘛！後來又思考，通過代理模式能否實現呢，通過制定協議程式碼質量更高？於是乎將代理存放在一個數組中，接收到事件後遍歷陣列中的代理去響應事件。 然而出現了一個問題，我們在一般使用代理模式中，代理都是一個weak修飾屬性，代理釋放該屬性自動置nil，然而將代理放到陣列中，代理被強引用，引用計數加1，陣列不釋放，代理永遠無法釋放。這該怎麼解決呢，後來仿照一般的代理模式，建立一個橋接物件，代理數組裡面存放橋接物件，然後橋接物件有一個weak修飾的屬性指向真正的代理。橋接物件FLBridgeDelegateModel如下：

#import <Foundation/Foundation.h>


@interface FLBridgeDelegateModel : NSObject

@property (nonatomic, weak) id delegate;

- (instancetype)initWithDelegate:(id)delegate;

@end

新增代理：

- (void)addDelegate:(id<FLClientManagerDelegate>)delegate {
    BOOL isExist = NO;
    for (FLBridgeDelegateModel *model in self.delegateArray) {

        if ([delegate isEqual:model.delegate]) {
            isExist = YES;
            break;
        }
    }
    if (!isExist) {
        FLBridgeDelegateModel *model = [[FLBridgeDelegateModel alloc] initWithDelegate:delegate];
        [self.delegateArray addObject:model];
    }
}

移除代理：

- (void)removeDelegate:(id<FLClientManagerDelegate>)delegate {

    NSArray *copyArray = [self.delegateArray copy];
    for (FLBridgeDelegateModel *model in copyArray) {
        if ([model.delegate isEqual:delegate]) {
            [self.delegateArray removeObject:model];
        }
        else if (!model.delegate) {
            [self.delegateArray removeObject:model];
        }
    }
}

通過橋接物件的方式，完美解決代理無法釋放的問題

3.訊息的傳送，通過管理類FLChatManager實現

方法：
- (OnAckCallback * _Nonnull)emitWithAck:(NSString * _Nonnull)event with:(NSArray * _Nonnull)items SWIFT_WARN_UNUSED_RESULT;

[[[FLSocketManager shareManager].client emitWithAck:@"chat" with:@[parameters]] timingOutAfter:20 callback:^(NSArray * _Nonnull data) {

        FLLog(@"%@", data.firstObject);

        if ([data.firstObject isKindOfClass:[NSString class]] && [data.firstObject isEqualToString:@"NO ACK"]) {  // 伺服器沒有應答


            message.sendStatus = FLMessageSendFail;
            // 傳送失敗
            statusChange();

        }
        else {  // 伺服器應答

            message.sendStatus = FLMessageSendSuccess;
            NSDictionary *ackDic = data.firstObject;
            message.timestamp = [ackDic[@"timestamp"] longLongValue];
            message.msg_id = ackDic[@"msg_id"];
            if (fileData) {
                NSDictionary *bodies = ackDic[@"bodies"];
                message.bodies.fileRemotePath = bodies[@"fileRemotePath"];
                message.bodies.thumbnailRemotePath = bodies[@"thumbnailRemotePath"];
            }
            if (message.type == FLMessageLoc) {
                NSDictionary *bodiesDic = ackDic[@"bodies"];
                message.bodies.fileRemotePath = bodiesDic[@"fileRemotePath"];
            }

            // 傳送成功
            statusChange();

        }
        // 更新訊息
        [[FLChatDBManager shareManager] updateMessage:message];

        // 資料庫新增或者重新整理會話
        [[FLChatDBManager shareManager] addOrUpdateConversationWithMessage:message isChatting:YES];
    }];

二、FMDB

主要實現離線訊息儲存，FLChatDBManager管理類中實現

三、webRTC

WebRTC，名稱源自網頁實時通訊（Web Real-Time Communication）的縮寫，簡而言之它是一個支援網頁瀏覽器進行實時語音對話或視訊對話的技術。
它為我們提供了視訊會議的核心技術，包括音視訊的採集、編解碼、網路傳輸、顯示等功能，並且還支援跨平臺：windows，linux，mac，android，iOS。
它在2011年5月開放了工程的原始碼，在行業內得到了廣泛的支援和應用，成為下一代視訊通話的標準。

本專案視訊通話的核心部分都是源自於此，自己將webRTC與socket.io予以整合，添加了部分功能

下圖為視訊通話實現的流程圖，具體邏輯請參照專案原始碼，FLVideoChatHelper工具類中實現

視訊通話流程圖.png

關於伺服器部分程式碼

該專案伺服器部分是通過node.js搭建，node.js真的是一門非常強大的語言，而且簡單易學，如果你有一點點js基礎相信看懂伺服器程式碼也沒有太大問題！本人週末在家看了一天node.js就上手寫伺服器端程式碼，所以有時間真滴可以認真學習一下，以後寫專案再也不用擔心沒有網路資料了，哈哈

專案安裝

1.iOS
  • pod install安裝第三方
  • 首先我們需要去百度網盤下載 WebRTC標頭檔案和靜態庫.a。下載完成，解壓縮，拖入專案中；
  • 切換連線的地址為伺服器的IP地址(RequestUrlConst.h中的baseUrl)
  • 想要測試視訊通話功能需要兩臺真機，且同時線上，處於同一區域網內
2.伺服器部分
  • 首先需要node.js環境
  • 電腦安裝MongoDB
  • npm install 安裝第三方
  • brew install imagemagick
    brew install graphicsmagick(伺服器處理圖片用到)

待實現功能

  1. 群聊天 後臺已實現，iOS客戶端待實現
  2. 短視訊傳送與播放
  3. 訊息氣泡優化
  4. 使用者頭像管理
  5. 離線訊息拉取
  6. iOS遠端推送
  7. 未讀訊息紅點管理


    第一次釋出文章，還有許多不足。如果您在文章專案中發現錯誤，請指正！同時歡迎點贊評論，有更多想法希望多溝通交流，一起提升。。。

    聯絡方式:
    qq:954751186

相關推薦

基於socket.io即時通訊IM實現，webRTC實現視訊通話

Socket.io-FLSocketIM-iOS 基於Socket.io iOS即時通訊客戶端 iOS IM Client based on Socket.io 實現功能 文字傳送 圖片傳送（從相簿選取，或者拍攝） 短視

基於socket.io客戶端與服務端的相互通訊

dem send ins 返回 on() .com cal selector req socket.io是對websocket的封裝，用於客戶端與服務端的相互通訊。官網:https://socket.io/。 下面是socket.io的用法： 1、由於使用express

node+express+socket.io+mysql=通訊服務器搭建（一）

釋放 get future 連接mysql add .com 成功 query tp服務器 首發github/blog 歡迎大家評論給星 安裝 首先假定你已經安裝了 Node.js，接下來為你的應用創建一個目錄，然後安裝express-generator應用骨架 $ mkd

XyTalk企業即時通訊IM開始開源

即時通訊 xmpp協議 ref 協作 ID 企業 通訊 web門戶 集成 網址： https://gitee.com/475660/xyTalk-pc https://github.com/xy-Group/xyTalk-pc Xy.Platform是一個高性能、可

即時通訊（文字，圖片，視頻）包括坐席調度排隊系統初步理解

音視頻 文字 同時 如果 除了 get 接下來 wss 尋找 　　最近公司跟騰訊合作，要搞一個視頻呼叫服務，業務場景是這樣的：客戶通過小程序或者H5發起視頻呼叫，坐席端接入進行視頻通話。原本最初接到該需求的時候，有想法自己搞一個視頻呼叫服務，後來經過調研發現，想搞視頻，我還

java ssm 後臺框架平臺 項目源碼 websocket 即時通訊 IM quartz spri

dem exce news 復雜 anti java界面編程 excel jpg dmi 博文來源：http://www.fhadmin.org/webnewsdetail2.htmlA代碼編輯器，在線模版編輯，仿開發工具編輯器，pdf在線預覽，文件轉換編碼B 集成代碼生成

Socket搭建即時通訊伺服器

即時通訊 相關程式碼Demo地址, 內附服務端程式碼和iOS端聊天室測試Demo 原文地址: Socket搭建即時通訊伺服器 即時通訊（Instant messaging，簡稱IM）是一個終端服務，允許兩人或多人使用網路即時的傳遞文字訊息、檔案、語音與視訊交流 即時通訊按

Android學習筆記--基於XMPP的即時通訊

一、常見即時通訊實現 socket openfire+asmack 環信 信鴿 融雲 二、XMPP優勢 1. 開放性 XMPP協議是自由、開放、公開的，並且易於瞭解。而且在客戶端、伺服器、元件、原始碼庫等方面，都已經各自有多種實現。 2.跨平臺 客戶端只要基於X

【Python】_基於socket程式設計_TCP通訊介面

目錄 一、在eclipse中配置pyDev 二、Tcp聊天（非圖形介面） （a） Server端建立 （b）Client端建立 （c）執行測試 三、Tcp聊天（UI版） （一）wxpython圖形工具的

一套原創分散式即時通訊(IM)系統理論架構方案

一 典型的即時通訊架構可能是這樣的 無論是IM訊息通訊系統還是客戶訊息系統，其本質都是一套訊息傳送與投遞系統，或者說是一套網路通訊系統，其本質兩個詞：儲存與轉發。 1攜程非同步訊息系統初期架構 上圖所示顯示了攜程家的訊息系統的初期架構，圖中架構直接用mongodb作

使用nodeJs+web Socket構建即時通訊（WebIM）

在文章的開頭，我要解釋一下，為什麼不直接使用web Socket實現即時通訊，因為一部分瀏覽器並不相容web Socket，導致即時通訊在這些瀏覽器上無法正常使用，所以才需要用到nodeJs裡封裝好webSocket協議的socket.io包模組來提供不相容we

基於XMPP的即時通訊

一、常見即時通訊實現 socket openfire+asmack 環信 信鴿 融雲 二、XMPP優勢 1. 開放性 XMPP協議是自由、開放、公開的，並且易於瞭解。而且在客戶端、伺服器、元件、原始碼庫等方面，都已經

聊天源碼IM聊天室模板 群組聊天app 即時通訊IM設計聊天

redis 需求 obs 私有化 擁有 查看 即時通 緩存 相關 （此貼長期有效）系統提供多種方式合作，支持源碼轉讓/支持按年整體運維合作/支持行業定制開發，更多需求請聯系我們 團隊Tel：15538001716 （V同） 獨立IM：個性化定制，私有化部署，全功能，高並發，

RDIFramework.NET敏捷開發框架通過SignalR技術整合即時通訊(IM)

1、引言 即時通訊（IM）是RDIFramework.NET敏捷開發框架全新提供的一個基於Web的即時通訊、內部聊天溝通的工具。介面美觀大方對於框架內部進行訊息的溝通非常方便。基於RDIFramework.NET敏捷開發框架的即時通訊IM支援常規的使用者對使用者（點對點）聊天、工作流程流轉的提醒、服務端訊息的

國產化即時通訊系統開發 -- 使用Avalonia實現GGTalk的UI介面（Linux、Ubuntu、UOS、中標麒麟）

距離2013年開源GGTalk以來，7年已經過去了，GGTalk現在有了完整的PC版、安卓版、iOS版（即將釋出），以及Xamarin版本。 然而，時代一直在變化，在今天，有個趨勢越來越明顯，那就是政府系統將逐漸遷移到Linux以及國產化的作業系統和資料庫上面來。 所以，GGTalk也將隨順這一必然的趨勢，服

通過SignalR技術整合即時通訊(IM)在.NET中應用落地

![img](https://img2020.cnblogs.com/blog/157572/202102/157572-20210207112946782-1622713745.jpg) ## 1、引言 ## **即時通訊（IM）**是RDIFramework.NET敏捷開發框架全新提供的一個基於Web

劍指offer66題--Java實現，c++實現和python實現 15.反轉連結串列

題目描述 輸入一個連結串列，反轉連結串列後，輸出新連結串列的表頭。 C++ /* struct ListNode { int val; struct ListNode *next; ListNode(int x) : val(x), next(NULL) { } };*/

劍指offer66題--Java實現，c++實現和python實現 14.連結串列中倒數第k個結點

題目描述 輸入一個連結串列，輸出該連結串列中倒數第k個結點。 C++實現 /* struct ListNode { int val; struct ListNode *next; ListNode(int x) : val(x), next(NULL) { } };*/

劍指offer66題--Java實現，c++實現和python實現 13.調整陣列順序使奇數位於偶數前面

題目描述 輸入一個整數陣列，實現一個函式來調整該陣列中數字的順序，使得所有的奇數位於陣列的前半部分，所有的偶數位於陣列的後半部分，並保證奇數和奇數，偶數和偶數之間的相對位置不變。 C++實現 class Solution { public: void reOrderArray(v

劍指offer66題--Java實現，c++實現和python實現 11.二進位制中1的個數

題目描述 輸入一個整數，輸出該數二進位制表示中1的個數。其中負數用補碼錶示。 Python實現 # -*- coding:utf-8 -*- class Solution: def NumberOf1(self, n): cnt = 0 if n