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