windows下搭建websocketpp開發環境以及前端處理二進制流

搭建websocketpp開發環境以及前端處理二進制流

開發平臺

• 本文主要在windows完成編譯開發任務

環境搭建

• 在開發前要先搭建好開發環境，主要就是下載並安裝boost和webscoketpp這兩個

Boost C++ Libraries

• 官方地址：https://www.boost.org/

• WebSocket++依賴於boost，因此在使用WebSocket++前需要編譯Boost

• 如果是下載源碼進行編譯的話，那麼你的平臺可能不滿足編譯環境，導致無法編譯（具體編譯查看官方文檔說明：https://www.boost.org/doc/libs/1_73_0/more/getting_started/windows.html
  ）
  

• 因此推薦到 Boost C++ Libraries - Browse /boost-binaries at SourceForge.net 下載windows版的進行安裝，安裝完成還需要編譯

• 我們會看到好多版本可以選擇，如果是用於生產環境，那麼建議選穩定版的，下載之前先下載DEPENDENCY_VERSIONS.txt，內容大概如下：

Python 2: 2.7.17
Python 2: 2.7.17 amd64
Python 3: 3.8.0
Python 3: 3.8.0 amd64
zlib: 1.2.8
bzip2: 1.0.6


Microsoft Visual Studio 2005 - msvc-8.0 - Service Pack 1
Microsoft Visual Studio 2008 - msvc-9.0 - Service Pack 1
Microsoft Visual Studio 2010 - msvc-10.0 - Service Pack 1
Microsoft Visual Studio 2012 - msvc-11.0 - Update 4
Microsoft Visual Studio 2013 - msvc-12.0 - Update 5
Microsoft Visual Studio 2015 - msvc-14.0 - Update 3
Microsoft Visual Studio 2017 - msvc-14.1 - VS 15.9.17
Microsoft Visual Studio 2019 - msvc-14.2 - VS 16.3.6

• 如果你的開發工具是vs2019，那麼就選擇boost_1_72_0-msvc-14.2-64.exe下載
• 編譯過程：運行boostrap.bat,之後會生成b2.exe,再點擊b2.exe即可編譯完成，編譯時間有點長哦
• 編譯完成後就可以看到根目錄多了stage文件夾，這個就是我們接下來需要用到的文件夾

WebSocket++

• WebSocket++官網：https://docs.websocketpp.org/
• 可直接在github上下載一個版本：https://github.com/zaphoyd/websocketpp/releases
• 下載完之後解壓即可

開發工具

• 環境搭建好之後，就需要選擇一個開發ide了，推薦visual studio,因此它相對方便些，如果使用vscode，還得安裝好mingw纔行，稍微麻煩些

visual studio

• 這裏我舉例的是vistal studio 2017
• 先從websocketpp源碼中找到examples/echo_server下的這兩個文件，拷貝進你的工程裏，如下圖
• 再配置下websocketpp和boost的包含目錄，如下圖
  
• 鏈接器這裏再配置下boost的庫，如下圖
  
• 以上路徑具體要看個人的實際安裝情況

vscode

• 使用vscode的話還得安裝mingw，由於之前我已經安裝了msys2，並且在裏面已經安裝了mingw64，因此只需要將mingw64/bin配置進環境變量，之後打開cmd輸入gcc -v 測試下即可
• 接下來還要安裝c/c++插件
• 接下來從websocketpp源碼中找到examples/echo_server下的這兩個文件，拷貝進你的工程裏，如圖
• 然後按住ctrl+shift+p，輸入edit,可以看到c/c++編輯配置，如下圖
• 這個配置其實就是c_cpp_properties.json這個文件，內容參考如下，主要就是includePath下增加了兩個庫的根目錄，以便能找到相關頭文件

{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
                "${workspaceFolder}/**",
                "F:/software/websocket/websocketpp-0.8.2",
                "D:/websocket/boost_1_72_0"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "windowsSdkVersion": "10.0.16299.0",
            "compilerPath": "D:/visialstudio2017/VC/Tools/MSVC/14.13.26128/bin/Hostx64/x64/cl.exe",
            "cStandard": "c11",
            "cppStandard": "c++17",
            "intelliSenseMode": "msvc-x64"
        }
    ],
    "version": 4
}

• 接下來還是按住ctrl+shift+p,輸入tasks,生成一個tasks.json文件
• 內容參考如下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "g++",
            "type": "shell",
            "command": "g++",
            "args": [         
                "-o echo_server",
                "echo_server.cpp",
                "-IF:/software/websocket/websocketpp-0.8.2",
                "-ID:/websocket/boost_1_72_0",
                "-LD:/websocket/boost_1_72_0/stage/lib",
                "-lwsock32",
                "-lws2_32"

            ],
            "group": "build",
            "presentation": {
                // Reveal the output only if unrecognized errors occur.
                "reveal": "silent"
            },
            // Use the standard MS compiler pattern to detect errors, warnings and infos
            "problemMatcher": "$msCompile"
        }
    ]
}

• 這個任務名稱定爲g++（可以隨便取，修改label即可）
• command爲g++,這個指的是mingw中的g++.exe，需要我們提前配置好mingw的環境變量，否則就要寫爲g++.exe的完整路徑
• args中的“-lwsock32”，“-lws2_32”這兩行很重要，沒有這兩行就會報類似undefined reference to `htonl@4’這樣的錯誤
• 那麼怎麼運行這個任務呢，在終端選擇運行生成任務，然後會在頂部出現一個下拉項，選擇g++,這個g++就是我們在tasks.json裏配置的label的值

• 任務就會執行了，執行結果請查看終端的信息，如果沒有其他錯誤，最後就能看到生成的exe了

測試

• 服務編譯好之後，使用在線websocket or http://coolaf.com/tool/chattest 進行測試即可

前端websocket

• 前端websocket的使用可以查看以下文檔：WebSocket - Web API 接口參考 | MDN
• 這裏主要說明下前端如何處理二進制流
• 前端在接收二進制流時的類型是根據Websocket.binaryType屬性決定的，它有blob和arraybuffer兩個值可以設置，不管設置什麼，文本數據都是可以收到的，但二進制數據就會根據這個binaryType決定收到的數據類型

	this.websocket.binaryType="arraybuffer";//默認是blob,當爲blob時，服務端傳輸二進制流時前端收到Blob類型；當爲arraybuffer時，服務端傳輸二進制流時前端收到ArrayBuffer類型
 	// 接受到信息
    this.websocket.onmessage = function (e) {
        
        if(e.data instanceof Blob){
            let blob=e.data;
            console.log("Blob:size="+blob.size);
            //js中的blob沒有沒有直接讀出其數據的方法，通過FileReader來讀取相關數據
            let reader = new FileReader();
            reader.readAsArrayBuffer(blob);
            //  當讀取操作成功完成時調用.
            reader.onload = function(evt){  
                if(evt.target.readyState == FileReader.DONE){  
                    let buf = evt.target.result; 
                   console.log("byteLength="+buf.byteLength);//此處的長度會與blob.size一致
                    }
                    
                }
        }else if(e.data instanceof ArrayBuffer){
            console.log("ArrayBuffer:byteLength="+e.data.byteLength);

        }else{ 
        	//文本的話則直接進入這裏
            console.log("String:data="+e.data);
        }
       
    }

參考

• (25條消息)搭建WebSocketpp環境_運維_xingxinmanong的博客-CSDN博客 https://blog.csdn.net/xingxinmanong/article/details/65447874

• C++ websocket庫 websocketpp/websocket++例子編譯試用 - 碼農教程 http://www.manongjc.com/article/57236.html

• C++報錯集合：undefined reference to `htonl@4_C/C++_ttguess的專欄-CSDN博客 https://blog.csdn.net/ttguess/article/details/7267631?utm_source=blogxgwz8

• js中從blob提取二進制 - AndyDHG - 博客園 https://www.cnblogs.com/redlight/p/3905326.html