精华内容
下载资源
问答
  • WebSocket接收服务器数据并控制W…

    千次阅读 2017-04-21 10:49:35
    WebSocket接收服务器数据并控制WebGL渲染的模型时发生Uncaught TypeError: Uncaught TypeError: Cannot read property 'rotation' of undefined问题 TypeError: Cannot re" TITLE="用WebSocket接收服务器数据并...

    用WebSocket接收服务器数据并控制WebGL渲染的模型时发生Uncaught TypeError: Uncaught TypeError: Cannot read property 'rotation' of undefined问题

    用WebSocket接收服务器数据并控制WebGL渲染的模型时发生Uncaught <wbr>TypeError: <wbr>Cannot <wbr>re

    这个问题一直令我头疼了很久。最终发现是渲染与websocket连接顺序的问题。

    当websocket服务器打开,websocket页面client能够正常链接的时候,反倒会导致加载完的模型是个null,真是不太懂里面的基本原理。最开始的时候,我的websocket系列初始化和定义函数是写在最开头的:

    function initThree() {
                renderer=new THREE.WebGLRenderer({antialias:true});
                renderer.setSize(windows.innerWidth, windows.innerHeight );
                renderer.setClearColor(0xdddddd, 1.0);
                renderer.shadowMapEnabled = true;
                document.getElementByIdx_x_x_x_x_x_x("canvas3d").a(renderer.domElement);

     

                websocket = new WebSocket(wsUri);
                websocket.onopen = function(evt) { onOpen(evt) };
                websocket.onclose = function(evt) { onClose(evt) };
                websocket.onmessage = function(evt) { onMessage(evt) };
                websocket.onerror = function(evt) { onError(evt) };
    }

     

    于是每次链接上服务器后,webGL能不能渲染出模型都得靠运气。一般第一个网页准失败,第二或者第三个才能正常运行。链接不上服务器的时候基本webGL都能渲染,可以确定是websocket和webgl协作的时候出了什么问题。之后调换了下顺序:

     

    function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();

     

                websocket = new WebSocket(wsUri);
                websocket.onopen = function(evt) { onOpen(evt) };
                websocket.onclose = function(evt) { onClose(evt) };
                websocket.onmessage = function(evt) { onMessage(evt) };
                websocket.onerror = function(evt) { onError(evt) };
                render();

    }

     

    发觉还是老问题。百思不得其解。如果把render调换到new WebSocket的前面,的确可以运行,但是WebSocket罢工了,压根不运行。最终发现,render必须放在new WebSocket的后面,系列websocket定义函数的前面,也就是夹在之中

     

    function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();

     

                websocket = new WebSocket(wsUri);

                render();
                websocket.onopen = function(evt) { onOpen(evt) };
                websocket.onclose = function(evt) { onClose(evt) };
                websocket.onmessage = function(evt) { onMessage(evt) };
                websocket.onerror = function(evt) { onError(evt) };

    }

     

    但……这并没有从根本上解决加载不上的问题:于是,最佳方式是判断加载完以后再来渲染render:

    参考链接:loader.onLoadComplete=function(){scene.add( mesh )}

    这样就顺利多了。但,还有个问题,浏览器不报错、也不显示

     

    添加setTimeOut函数,将更改角度的函数塞进Js单线程执行队列里面:

    var monkeyRotate=function(){
                monkey.rotation.y -= gypoY * 0.03;

    }
    var render=function() {
                requestAnimationFrame(render);
                setTimeout(monkeyRotate,0);

    }

     

    WebSocket部分函数都塞到模型加载完以后运行

     

    loader2.onLoadComplete=function(){
                    scene.add(monkey);

                    //Initial of WebSocket Client
                    websocket = new WebSocket(wsUri);
                    //Block problem: The render function should be at the between of new WebSocket and 'on' series function (onopen, onclose, onmessage, onerror, etc)
                    websocket.onopen = function(evt) { onOpen(evt) };
                    websocket.onclose = function(evt) { onClose(evt) };
                    websocket.onmessage = function(evt) {
                       setTimeout(onMessage(evt),0);
                    };
                    websocket.onerror = function(evt) { onError(evt) };

    }

     

    这样处理后,谷歌浏览器中加载模型的成功率从60%提高到90%左右。

    最终解决办法是把服务器端的发送消息标准化。由于发来的消息不仅仅包含double类型的传感器数据,还包含了hi how are you这样的文字数据,当处理到文字数据的时候,javascript会发生类型转换错误,导致rotation属性丢失。解决后成功率100%

    展开全文
  • 本篇文章帮大家学习Websocket接收和发送消息,包含了Websocket接收和发送消息使用方法、操作技巧、实例演示和注意事项,有一定的学习价值,大家可以用来参考。通常在服务器发送一些数据时发生Message事件。服务器...

    本篇文章帮大家学习Websocket接收和发送消息,包含了Websocket接收和发送消息使用方法、操作技巧、实例演示和注意事项,有一定的学习价值,大家可以用来参考。

    通常在服务器发送一些数据时发生Message事件。服务器发送到客户端的消息可以包括纯文本消息,二进制数据或图像。无论何时发送数据,都会触发onmessage函数。

    此事件充当客户端对服务器的耳朵。每当服务器发送数据时,都会触发onmessage事件。

    以下代码段描述了打开Web Socket协议的连接。

    connection.onmessage = function(e){

    var server_message = e.data;

    console.log(server_message);

    }

    还需要考虑使用Web套接字可以传输哪些类型的数据。Web套接字协议支持文本和二进制数据。就javascript而言,文本指的是字符串,而二进制数据则表示为ArrayBuffer。

    Web套接字一次只支持一种二进制格式。二进制数据的声明明确地完成如下 -

    socket.binaryType = "arrayBuffer";

    socket.binaryType = "blob";

    字符串

    字符串是一种人类可读的格式,如xml和JSON。每当引发onmessage事件时,客户端都需要检查数据类型并采取相应措施。

    用于确定数据类型为字符串(String)的代码片段如下所述 -

    socket.onmessage = function(event){

    if(typeOf event.data === String ) {

    console.log(“Received data string”);

    }

    }

    JSON(javaScript对象表示法)

    它是一种轻量级格式,用于在计算机之间传输人类可读的数据。JSON的结构由键值对组成。

    示例

    {

    name: "James Devilson",

    message: "Hello World!"

    }

    以下代码显示如何处理JSON对象并提取其属性 -

    socket.onmessage = function(event) {

    if(typeOf event.data === String ){

    //create a JSON object

    var jsonObject = JSON.parse(event.data);

    var username = jsonObject.name;

    var message = jsonObject.message;

    console.log("Received data string");

    }

    }

    XML

    尽管从浏览器到浏览器的技术各不相同,但解析XML并不困难。最好的方法是使用jQuery等第三方库进行解析。

    在XML和JSON中,服务器以字符串形式响应,该字符串在客户端进行解析。

    ArrayBuffer

    它由结构化二进制数据组成。封闭的位按顺序给出,以便可以容易地跟踪位置。ArrayBuffers可以方便地存储图像文件。

    使用ArrayBuffers接收数据非常简单。使用运算符instanceOf(不是equal)运算符。以下代码显示了如何处理和接收ArrayBuffer对象 -

    socket.onmessage = function(event) {

    if(event.data instanceof ArrayBuffer ){

    var buffer = event.data;

    console.log("Received arraybuffer");

    }

    }

    演示应用程序

    以下程序代码显示如何使用Web套接字发送和接收消息。

    WebSocket Test

    var wsUri = "wss://echo.websocket.org/";

    var output;

    function init()

    {

    output = document.getElementById("output");

    testWebSocket();

    }

    function testWebSocket()

    {

    websocket = new WebSocket(wsUri);

    websocket.onopen = function(evt) { onOpen(evt) };

    websocket.onclose = function(evt) { onClose(evt) };

    websocket.onmessage = function(evt) { onMessage(evt) };

    websocket.onerror = function(evt) { onError(evt) };

    }

    function onOpen(evt)

    {

    writeToScreen("CONNECTED");

    doSend("Websocket教程(Power by jikedaquan.com)");

    }

    function onClose(evt)

    {

    writeToScreen("DISCONNECTED");

    }

    function onMessage(evt)

    {

    writeToScreen('RESPONSE: ' + evt.data+'');

    websocket.close();

    }

    function onError(evt)

    {

    writeToScreen('ERROR: ' + evt.data);

    }

    function doSend(message)

    {

    writeToScreen("SENT: " + message);

    websocket.send(message);

    }

    function writeToScreen(message)

    {

    var pre = document.createElement("p");

    pre.style.wordWrap = "break-word";

    pre.innerHTML = message;

    output.appendChild(pre);

    }

    window.addEventListener("load", init, false);

    WebSocket Test

    在浏览器中打开上面代码文件,得到以下结果:

    展开全文
  • 本文旨在介绍如何在ESP32上运行的Websocket服务器接收和解析JSON消息。我们将以Arduino内核作为编程框架。文中对Websocket服务器的操作代码将会以先前的教程内容为基础。本教程介绍了如何安装Arduino...

    介绍

    测试使用的是一个集成esp - wroom -32模块的开发板:FireBeetle ESP32。代码开发是在MicroPython IDE uPyCraft上完成的。

    本文旨在介绍如何在ESP32上运行的Websocket服务器上接收和解析JSON消息。我们将以Arduino内核作为编程框架。

    文中对Websocket服务器的操作代码将会以先前的教程内容为基础。本教程介绍了如何安装Arduino库文件以及Python模块,其中Arduino库文件是操作Websocket服务器所必需的文件,而Python模块是测试本文中创建的客户端所必需的模块。

    另外,此教程还介绍了JSON解析功能,叙述了如何安装Arduino代码所需的JSON解析库文件。

    Python客户端代码

    在代码的开始部分,我们将导入websocket模块,以便能够访问连接ESP32 Websocket服务器所需的所有函数。

    [mw_shl_code=applescript,true]1 import websocket[/mw_shl_code]

    我们还将导入JSON模块,以便能够将Python字典(Python语言的基本数据结构之一)转换为JSON字符串。

    [mw_shl_code=applescript,true]1 import json[/mw_shl_code]

    接下来,我们将创建一个WebSocket类对象,利用它连接服务器并与服务器交换数据的方法。

    [mw_shl_code=applescript,true]1 ws = websocket.WebSocket()[/mw_shl_code]

    为了连接ESP32 websocket服务器,我们调用了该对象的connect方法,将目标服务器作为其传递参数,输入格式为“ws:// {ESP32 IP} /”,其中,{ESP32 IP} 表示WiFi网络中分配给ESP32的本地IP地址。

    请注意,我们将在Arduino代码中打印出ESP32在网络中的IP地址,所以现在您可以先虚拟一个IP地址并在稍后进行更改。

    [mw_shl_code=applescript,true]

    1 ws.connect("ws://192.168.1.78/")[/mw_shl_code]

    现在,我们将创建一个Python字典,它的某些“键-值”对用于表示传感器的测量值。请注意,这只是一个用作测试目的的数据结构,在实际应用中,ESP32可以充当网关,它可以从底层传感器接收数据,对数据进行处理并将处理结果发送到云端。

    [mw_shl_code=applescript,true]myDict = {"sensor": "temperature", "identifier":"SENS123456789", "value":10, "timestamp": "20/10/2017 10:10:25"}[/mw_shl_code]

    然后,我们将通过调用WebSocket对象的send方法把数据发送至Websocket服务器。此方法的输入参数是我们需要发送的数据。

    在此示例中,需要发送的数据为JSON字符串,它用于表示先前声明的Python字典。为了将字典转换为JSON字符串,我们需要调用JSON模块的dumps函数,将字典数据作为该函数的输入参数。

    [mw_shl_code=applescript,true]1 ws.send(json.dumps(myDict))[/mw_shl_code]

    在此之后,我们将通过调用WebSocker对象的recv方法来获取服务器响应结果并将其打印出来。

    [mw_shl_code=applescript,true]result = ws.recv()

    print(result)[/mw_shl_code]

    最后,我们将通过调用该对象的close方法来关闭服务器连接。

    [mw_shl_code=applescript,true]ws.close()[/mw_shl_code]

    完整的Python代码如下所示。

    [mw_shl_code=applescript,true]

    import websocket

    import json

    ws = websocket.WebSocket()

    ws.connect("ws://192.168.1.78/")

    myDict = {"sensor": "temperature", "identifier":"SENS123456789", "value":10, "timestamp": "20/10/2017 10:10:25"}

    ws.send(json.dumps(myDict))

    result = ws.recv()

    print(result)

    ws.close()[/mw_shl_code]

    Arduino代码

    引用的库文件及全局变量

    按照惯例,我们将从引用一些库文件开始编写Arduino代码。在本教程中,我们需要使用以下库文件:

    WiFi.h:将ESP32连接到WiFi网络所需的库文件,它用于实现从websocket客户端访问服务器。

    WebSocketServer.h:设置Websocket服务器以及与客户端交换数据所需的库文件。

    ArduinoJson.h:解析和访问客户端发送的JSON字符串数据所需的库文件。

    [mw_shl_code=applescript,true]#include

    #include

    #include [/mw_shl_code]

    为了运行Websocket服务器,我们需要声明一个WiFiServer类对象,利用它来设置TCP服务器。然后,在这个TCP服务器上运行Websocket服务器。

    WiFiServer对象的构造函数以TCP服务器的端口编号为输入参数,利用该端口侦听客户端连接状况。我们将使用端口80,即默认的HTTP端口。

    为了使用所有与Websocket协议相关的函数,我们还需要一个WebSocketServer类对象。

    [mw_shl_code=applescript,true]WiFiServer server(80);

    WebSocketServer webSocketServer;[/mw_shl_code]

    最后,我们需要一些变量来存储待连接WiFi网络的证书。请注意,我们可以将WiFi网络证书直接作为参数传递给WiFi网络连接函数,但在此处声明变量可以让代码更清晰,更易于维护。

    [mw_shl_code=applescript,true]const char* ssid = "yourNetworkName";

    const char* password = "yourNetworkPassword";[/mw_shl_code]

    客户端消息处理函数

    我们需要解析来自客户端的JSON消息,为此,我们可以创建一个专用函数。通过这种方式,我们就可以将代码封装起来,不需要在Arduino主循环函数中穿插大量的逻辑代码,从而使整个代码非常清晰整洁。

    处理客户端数据的函数将以待解析的String字符串数据为输入参数。请注意,之前“如何在ESP32上设置Websockets服务器”的教程中已强调,当从客户端接收数据时,数据类型必须是String字符串。

    [mw_shl_code=applescript,true]void handleReceivedMessage(String message){

    // message handling code

    }[/mw_shl_code]

    现在,为了解析此消息,我们首先需要声明一个StaticJsonBuffer类对象。JSON库文件将把此对象作为存储JSON对象树的预分配内存池。

    我们需要指定此内存池的大小,这可以通过模板参数工具完成。通过使用此工具,我们可以根据JSON的数据结构更精确地计算出所需的缓冲区大小。在这个简单的示例中,我们把此内存池的大小设置为500,对于待解析的数据结构而言,这个大小已经足够了。

    [mw_shl_code=applescript,true]StaticJsonBuffer<500> JSONBuffer; //Memory pool[/mw_shl_code]

    接下来,为了把待解析的JSON消息作为函数的输入参数,我们将调用刚刚创建的StaticJsonBuffer对象的parseObject方法。

    此方法将待解析的消息作为输入参数,并返回一个JsonObject类引用对象。我们将使用这个对象来访问已解析的值,但在此之前,首先要检查解析过程是否已成功完成。

    为此,我们只需在刚刚获得的JsonObject引用对象上调用success方法即可。此方法没有任何输入参数,它的返回值为一个布尔值,用于指示解析成功(true)或失败(false)。

    如果解析失败,那么函数执行过程将会结束,因为我们无法访问此消息的任何值。

    [mw_shl_code=applescript,true]JsonObject& parsed = JSONBuffer.parseObject(message); //Parse message

    if (!parsed.success()) {   //Check for errors in parsing

    Serial.println("Parsing failed");

    return;

    }[/mw_shl_code]

    如果解析成功,我们就可以访问消息中的值了。在此案例中,我们可以简单地从JSON数据结构中获取每个变量并将它们打印到串口控制台。

    为了访问已解析JSON消息中的每个值,我们只需简单地使用下标运算符(方括号)以及带有JSON对象中键名称的字符串即可。

    请注意,我们已经从Python代码中了解了JSON消息的数据结构,因此我们知道数据结构中的每个键,可以轻松地将每个变量映射到合适的数据类型。

    [mw_shl_code=applescript,true]const char * sensorType = parsed["sensor"]; //Get sensor type value

    const char * sensorIdentifier = parsed["identifier"]; //Get sensor type value

    const char * timestamp = parsed["timestamp"]; //Get timestamp

    int value = parsed["value"]; //Get value of sensor measurement

    [/mw_shl_code]

    在获取每个值后,我们将以一种友好的格式将其打印到串行端口。消息处理函数的完整代码如下所示,其中包含了这些打印。

    [mw_shl_code=applescript,true]

    void handleReceivedMessage(String message){

    StaticJsonBuffer<500> JSONBuffer;                     //Memory pool

    JsonObject& parsed = JSONBuffer.parseObject(message); //Parse message

    if (!parsed.success()) {   //Check for errors in parsing

    Serial.println("Parsing failed");

    return;

    }

    const char * sensorType = parsed["sensor"];           //Get sensor type value

    const char * sensorIdentifier = parsed["identifier"]; //Get sensor type value

    const char * timestamp = parsed["timestamp"];         //Get timestamp

    int value = parsed["value"];                          //Get value of sensor measurement

    Serial.println();

    Serial.println("----- NEW DATA FROM CLIENT ----");

    Serial.print("Sensor type: ");

    Serial.println(sensorType);

    Serial.print("Sensor identifier: ");

    Serial.println(sensorIdentifier);

    Serial.print("Timestamp: ");

    Serial.println(timestamp);

    Serial.print("Sensor value: ");

    Serial.println(value);

    Serial.println("------------------------------");

    }[/mw_shl_code]

    Setup设置函数

    我们的Arduino setup设置函数用于执行初始化任务。首先,我们将建立一个串行连接以打印程序的输出结果。

    接下来,我们将把ESP32连接到WiFi网络。我们将使用之前教程中多次使用的相同代码,您可以点击这里查看每个函数的详细说明。

    请注意,在建立网络连接之后,我们将把分配给ESP32的本地IP地址打印出来,这个IP地址就是我们应该在Python代码Websocket connect方法中使用的IP地址。

    在完成WiFi网络连接之后,我们将通过调用程序开头声明的WiFiServer全局对象的begin方法来初始化TCP服务器。此函数没有任何输入参数,其返回值为空(void)。

    完整的setup函数参数代码如下所示,其中包含了之前提到的所有初始化内容。

    [mw_shl_code=applescript,true]void setup() {

    Serial.begin(115200);

    delay(2000);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi..");

    }

    Serial.println("Connected to the WiFi network");

    Serial.println(WiFi.localIP());

    server.begin();

    delay(100);

    }[/mw_shl_code]

    主循环

    在此示例的最后,我们需要创建用于处理客户端数据的代码,这些工作将在Arduino主循环中完成。

    我们首先需要检查是否存在可用的客户端。为此,我们将调用已全局声明并已通过setup函数初始化的WiFiServer对象的可用方法。

    正如之前教程中所述,我们仍然在TCP层级执行任务,只有在该层级我们才能在Websockets协议层中执行任务。

    这些可调用的方法没有任何输入参数,其返回值为WiFiClient类对象。返回的对象将以变量的形式存储,随后,我们需要调用connected方法,该方法将返回一个布尔值,用于指示客户端是否连接成功。

    如果客户端已连接,我们将需要执行Websocket handshake握手过程,它是协议的初始部分。为此,我们只需简单地调用程序开头声明的WebSocketServer对象的handshake方法即可。

    Handshake方法的输入参数为之前获得的WiFiClient对象,在程序执行时,利用此WiFiClient对象与客户端通信。如果握手过程正确完成,则此方法调用的返回值为true,否则返回false。

    因此,如果handshake方法返回true,我们就可以尝试与客户端交换数据了。

    [mw_shl_code=applescript,true]

    WiFiClient client = server.available();

    if (client.connected() && webSocketServer.handshake(client)) {

    // Handling data exchange with the Websocket client

    }[/mw_shl_code]

    在先前的条件程序块内,我们将声明一个String缓冲区来保存从客户端接收的数据,然后在客户端连接状态下执行循环操作。我们可以通过再次调用WiFiClient对象的connected方法来检查客户端是否仍然处于连接状态,将其返回值作为while循环的条件。

    然后,在循环中,我们将通过调用WebSocketServer对象的getData方法来获取客户端发送的数据。此方法没有任何输入参数,其返回值是一个包含了客户端发送数据的String数据。

    如果此数据大小大于零(客户端可能没有发送任何数据),我们将调用先前定义的消息处理函数对其进行解析。

    仅出于测试目的,我们还将通过调用sendData方法将消息发送回客户端,从而可以在Python程序上将其打印出来。当然,在实际应用场景中,只需要返回一条用于指示所有内容是否已正确解析的消息。

    完整的Arduino主循环函数如下所示,其中包含了调用的其它函数。请注意,每次迭代内部循环与客户端交换数据都需要有一个小的延迟时间。否则,从客户端接收数据将会出现问题。

    [mw_shl_code=applescript,true]void loop() {

    WiFiClient client = server.available();

    if (client.connected() && webSocketServer.handshake(client)) {

    String data;

    while (client.connected()) {

    data = webSocketServer.getData();

    if (data.length() > 0) {

    handleReceivedMessage(data);

    webSocketServer.sendData(data);

    }

    delay(10); // Delay needed for receiving the data correctly

    }

    Serial.println("The client disconnected");

    delay(100);

    }

    delay(100);

    }[/mw_shl_code]

    最终完整代码

    最终的ESP32 Arduino源代码如下所示。

    [mw_shl_code=applescript,true]

    #include

    #include

    #include

    WiFiServer server(80);

    WebSocketServer webSocketServer;

    const char* ssid = "yourNetworkName";

    const char* password =  "yourNetworkPassword";

    void handleReceivedMessage(String message){

    StaticJsonBuffer<500> JSONBuffer;                     //Memory pool

    JsonObject& parsed = JSONBuffer.parseObject(message); //Parse message

    if (!parsed.success()) {   //Check for errors in parsing

    Serial.println("Parsing failed");

    return;

    }

    const char * sensorType = parsed["sensor"];           //Get sensor type value

    const char * sensorIdentifier = parsed["identifier"]; //Get sensor type value

    const char * timestamp = parsed["timestamp"];         //Get timestamp

    int value = parsed["value"];                          //Get value of sensor measurement

    Serial.println();

    Serial.println("----- NEW DATA FROM CLIENT ----");

    Serial.print("Sensor type: ");

    Serial.println(sensorType);

    Serial.print("Sensor identifier: ");

    Serial.println(sensorIdentifier);

    Serial.print("Timestamp: ");

    Serial.println(timestamp);

    Serial.print("Sensor value: ");

    Serial.println(value);

    Serial.println("------------------------------");

    }

    void setup() {

    Serial.begin(115200);

    delay(2000);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi..");

    }

    Serial.println("Connected to the WiFi network");

    Serial.println(WiFi.localIP());

    server.begin();

    delay(100);

    }

    void loop() {

    WiFiClient client = server.available();

    if (client.connected() && webSocketServer.handshake(client)) {

    String data;

    while (client.connected()) {

    data = webSocketServer.getData();

    if (data.length() > 0) {

    handleReceivedMessage(data);

    webSocketServer.sendData(data);

    }

    delay(10); // Delay needed for receiving the data correctly

    }

    Serial.println("The client disconnected");

    delay(100);

    }

    delay(100);

    }[/mw_shl_code]

    测试代码

    为了测试整个系统,我们首先编译了Arduino代码并将其上传到ESP32。在完成此过程后,只需打开串口监视器并等待连接至WiFi网络。

    网络连接完成后,ESP32的本地IP地址将会被打印至控制台。复制此IP地址并在connect方法的Python代码中使用。

    随后,运行Python代码。此时您将获得类似于图1的输出结果,我们发送到服务器的JSON消息被返回并显示出来。

    图1 - JSON消息回显在Python WebSocket客户端上

    然后,在Arduino串口监视器上,您将得到类似于图2的结果,JSON消息的解析值被打印到控制台。

    图2 - JSON消息的解析值

    注:本文作者是Nuno Santos,他是一位和蔼可亲的电子和计算机工程师,住在葡萄牙里斯本 (Lisbon)。

    他写了200多篇有关ESP32、ESP8266的有用的教程和项目。

    查看更多ESP32/ESP8266教程和项目,请点击 : ESP32教程汇总贴

    展开全文
  • that.initSocket() }) }, globalData: { SocketTask: '', callback: function () {}, } }) wxml(接收信息) app.globalData.callback = function (res) { //res 接收websocket onMessage事件返回的数据 var objs = ...

    app.js

    App({
      onLaunch: function () {
        var that = this;
        // 登录
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
        this.initSocket();
      },
      initSocket() {
        let that = this
        this.globalData.SocketTask = wx.connectSocket({
          url: 'wss://*******',
        })
        this.globalData.SocketTask.onOpen(function (res) {
          console.log('WebSocket连接已打开!readyState=' + that.globalData.SocketTask.readyState)
          var openid = wx.getStorageSync('openid')
          wx.sendSocketMessage({data:openid});
        })
        this.globalData.SocketTask.onMessage(function (res) {
          var objs = JSON.parse(res.data)
          that.globalData.callback(res)
        })
        this.globalData.SocketTask.onError(function (res) {
          console.log('readyState=' + that.globalData.SocketTask.readyState)
          that.initSocket()
        })
        this.globalData.SocketTask.onClose(function (res) {
          console.log('WebSocket连接已关闭!readyState=' + that.globalData.SocketTask.readyState)
          that.initSocket()
        })
      },
      globalData: {
        SocketTask: '',
        callback: function () {},
      }
    })
    

    wxml(接收信息)

     app.globalData.callback = function (res) {
          //res  接收websocket onMessage事件返回的数据
          var objs = JSON.parse(res.data)
          console.log(res) 
        }
    
    展开全文
  • 我用if(e) alert(‘abc’)判断e里面什么也没接受到 但是服务器给我发 字符串 或者base64 都可以接收到这是为什么 难道websocket不支持接收 二进制数据吗 还是 我接收的方式不对。
  • 2.实现原理在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” 。在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器...
  • nodejs-websocket创建websocket服务器 首先,感谢csdn各位大佬们对创建websocket的解释! 1.安装模块 npm install nodejs-websocket 2.搭建websocket服务端 这个是一个js文件 //websocket.js // 搭建websocket...
  • var reader = new FileReader();...当服务器发送二进制数据频率过快时,流浪器端会丢包(前面的数据接收不到,只接收到最后的数据)。如果服务器端每100ms发一次的话,浏览器就能够完整接收数据。为什么?
  • 一旦取得 Web 服务器上的 Web Socket 连接之后,就可以通过调用 send() 方法从浏览器发送数据到服务器上,通过 onmessage 事件处理程序从服务器接收数据到浏览器中。 下面是创建一个新的 WebSocket 对象的 API。 ...
  • 因为本人在做测试的原因,所以目前来讲是由本地模拟websocket服务器发送信息,代码如下: a = [['{"type":"connected"}', 0.02992081642150879], [ '{"name": "jinku00", "_create_time": "1597808952003668224", ...
  • android使用websocket连接服务器

    千次阅读 2016-06-03 13:41:53
    最近在做项目,因为客户端需要不停的接收服务器发来的json数据,直到休市为主。(是金融方面的APP)。android连接服务器比较常用的2种方式,socket和http,都没办法很好的满足。然后发觉了新的协议,基于HTML5的,...
  • 易语言websocket服务器源码,websocket服务器,握手包处理,生成握手参数列,创建返回握手包,返回数据包处理,接收数据包解码,高级截取文本,取sha1,切片,ord,字节集到十六进制,十六进制到字节集,取十进制,取数值,utf8到...
  • websocket客户端接收数据

    千次阅读 2019-05-06 15:54:44
    连接服务器IP:192.168.20.55及其端口号3002, 并接收数据 function handleWSReceive() { this.ws = new WebSocket("ws://192.168.... // websocket接收IP地址端口 this.ws.onopen = function () { console.log...
  • WebSocket和websocketd的介绍 -----&gt;https://www.jianshu.com/p/63afd0099565 其中在websocketd中后台脚本是不限制语言的,在我的测试当中,脚本是用python编写的,就写了简单的输出,因为标准输入(stdin)...
  • 最近做声纹识别的后端开发,在和前端做数据交互的时候需要接收语音,用了websocket方法,好处是在接收语音的同时做语音处理,即前端一边录入一边发送,后端接收一段一段的音频数据进行处理,同时可以对前面数据的...
  • SpringBoot集成WebSocket实现服务器向前端推送数据(全双工通信) 1.场景: 在一次开发中需要实时的向前端发送一些数据,一开始采用了前端轮询访问的方式,每隔一秒发送一次请求,这样虽然能达到项目的需求但是还是...
  • 一、开始的话使用python实现websocket服务器,可以在浏览器上实时显示远程服务器的日志。之前写了一个发布系统,每次发布版本后,为了了解发布情况(进度、是否有错误)都会登录到服务器上查看日志,有点麻烦,如果...
  • 代码里是C++ websocket客户端 c++websocket 服务器...websocket客户端可以嵌入到项目中,websocket服务器端可以接收多客户端访问,js页面端。我的业务是客户端发送到服务器端,服务器端在根据IP选择发送给多个客户端。
  • 已经成功的建立websocket连接,并且在单浏览器窗口下可以收到websocket服务器推送过来的消息 问题: 当其他用户在新的浏览器窗口建立相同连接时,连接可以建立 但是收不到服务器发送来的数据,evt.data打印出来...
  • await websocket.send(parsed) response = await websocket.recv() print(response) start_server = websockets.serve(time, '127.0.0.1', 4040) asyncio.get_event_loop().run_until_complete(start_server) ...
  • 就是websocket接收到ascii字符,响应函数是onMassage,接收到0x80以上的数,响应函数是onError,请问各位如何解决? 已知发送端没有问题,设置了断点,确定发送的数据是正确的,但接收部分出错。
  • regoch-websocket-浏览器 浏览器的Websocket客户端,最适合与。 根据版本13的制作的非常小但...Disconnect() -与WebSocket服务器断开连接 infoSocketId() -接收客户端的套接字ID infoSocketList() -接收服务
  • 如题,前台程序通过websocket可以接收服务器的信息,比如服务器返回一个坐标值x,y 然后假设MainLayer有一个名为monster的精灵,想写一个函数让精灵改变位置,可是为什么总是提示“this.monster is undefined”...
  • 服务器端推送技术在web开发中比较常用,可能早期很多人的解决方案是采用ajax向服务器轮询消息,这种方式的轮询频率不好控制,所以大大增加了服务器的压力,后来有了下面的方案:当客户端向服务器发送请求时,服务器...
  • 假设我有两个客户端...WebSocket的这段代码接收到这个请求,在routeService.js里实现的HTTP请求回调函数里,通过下图第16行获取WebSocket运行时实例, 调用第17行的方法broadcastWS就可以把传入的参数通过广播的...
  • 作者:长东转载自:https://www.cnblogs.com/lingbing/p/6089331.htmlHTML5给Web浏览器带来了全双工TCP连接websocket标准服务器的能力。换句话说,浏览器能够与服务器建立连接,通过已建立的通信信道来发送和接收...
  • C++简单实现一个websocket服务器

    万次阅读 热门讨论 2018-10-29 09:35:00
    最近想用C++实现一个websocket服务器,到网上找了一下,其实已经有一些实现好的开源库(比如WebSocketPP),尝试了一下,代码实现可以说是十分简单了,基本不到100行代码就搭好了,自己只要实现三个回调函数(OnOpen,...
  • 前言上一篇文章我们初步搭建了一个websocket服务器,但是还不能发送和接收数据,这篇文章我们聊一聊它是如何收发数据的。websocket支持文本和二进制的传输,内部是如何接收和发送数据的对使用者来说是不可见的,虽然...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 954
精华内容 381
关键字:

websocket接收服务器