React Native Client Application Fails Connection to ESP32 HTTPS Server
Posted: Fri Dec 03, 2021 10:14 am
My react native (Android) application is failing to connect to an esp32 https (self-signed) server, but my laptop can connect to it, and react native CAN connect to a http server on the esp32; see details below:
Does anyone know what is causing the connection failure (maybe Android doesn't like self signed certs?)
ESP32 HTTP
Laptop (chrome) Fetches http://192.168.4.1/hello Successfully
Mobile (react native) Fetches http://192.168.4.1/hello Successfully
ESP32 HTTPS
Laptop (chrome)Fetches https://192.168.4.1/hello Successfully
Mobile (react native) fails:
ESP32 Debug
E (342059) esp-tls-mbedtls: mbedtls_ssl_handshake returned -30592
E (342069) esp_https_server: esp_tls_create_server_session failed
W (342069) httpd: httpd_accept_conn: session creation failed
W (342079) httpd: httpd_server: error accepting new connection
React Native Debug:
Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
http://localhost:8081/index.bundle?plat ... e:24531:33
http://localhost:8081/index.bundle?plat ... e:28668:26
_callTimer@http://localhost:8081/index.bundle?plat ... e:28588:17
callTimers@http://localhost:8081/index.bundle?plat ... e:28789:19
__callFunction@http://localhost:8081/index.bundle?plat ... ue:3086:36
http://localhost:8081/index.bundle?plat ... ue:2810:31
__guard@http://localhost:8081/index.bundle?plat ... ue:3037:15
callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?plat ... ue:2809:21
callFunctionReturnFlushedQueue@[native code]
React Native App.js (for connecting to ESP32 Https)
ESP32 Main.c (AP and HTTPS Server)
Does anyone know what is causing the connection failure (maybe Android doesn't like self signed certs?)
ESP32 HTTP
Laptop (chrome) Fetches http://192.168.4.1/hello Successfully
Mobile (react native) Fetches http://192.168.4.1/hello Successfully
ESP32 HTTPS
Laptop (chrome)Fetches https://192.168.4.1/hello Successfully
Mobile (react native) fails:
ESP32 Debug
E (342059) esp-tls-mbedtls: mbedtls_ssl_handshake returned -30592
E (342069) esp_https_server: esp_tls_create_server_session failed
W (342069) httpd: httpd_accept_conn: session creation failed
W (342079) httpd: httpd_server: error accepting new connection
React Native Debug:
Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
http://localhost:8081/index.bundle?plat ... e:24531:33
http://localhost:8081/index.bundle?plat ... e:28668:26
_callTimer@http://localhost:8081/index.bundle?plat ... e:28588:17
callTimers@http://localhost:8081/index.bundle?plat ... e:28789:19
__callFunction@http://localhost:8081/index.bundle?plat ... ue:3086:36
http://localhost:8081/index.bundle?plat ... ue:2810:31
__guard@http://localhost:8081/index.bundle?plat ... ue:3037:15
callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?plat ... ue:2809:21
callFunctionReturnFlushedQueue@[native code]
React Native App.js (for connecting to ESP32 Https)
Code: Select all
import React, { Component } from 'react';
import {PermissionsAndroid,Text,View,Button,StyleSheet } from 'react-native';
import wifi from 'react-native-android-wifi';
//================================================================================================
//======================================= styles =================================================
//================================================================================================
const styles = StyleSheet.create({
view: {
alignItems: 'center',
backgroundColor: "#791424",
padding: 20,
},
text: {
fontSize: 30,
fontWeight: "bold",
color: "#F0F0F0"
}
})
//================================================================================================
//======================================= getData ================================================
//=================================================================c===============================
const getData = () => {
fetch("https://192.168.4.1:443/hello")
.then(response => response.text())
.then(data => console.log(data))
//.catch(error => { });
}
//================================================================================================
//=================================== getWiFiSSID ================================================
//================================================================================================
const getWiFiSSID = () => {
try {
wifi.getSSID((ssid) => {
console.log(ssid);
});
}
catch (err) {
console.warn(err)
}
}
//================================================================================================
//=================================== getWiFiBSSID ================================================
//================================================================================================
const getWiFiBSSID = () => {
try {
wifi.getBSSID((bssid) => {
console.log(bssid);
});
}
catch (err) {
console.warn(err)
}
}
//================================================================================================
//=================================== enableWiFi =================================================
//================================================================================================
const enableWiFi = () => {
wifi.setEnabled(true);
}
//================================================================================================
//=================================== disableWiFi ================================================
//================================================================================================
const disableWiFi = () => {
wifi.setEnabled(false);
}
//================================================================================================
//=================================== checkConnected =============================================
//================================================================================================
const checkConnected = () => {
wifi.connectionStatus((isConnected) => {
if (isConnected) {
console.log("is connected");
} else {
console.log("is not connected");
}
});
}
//================================================================================================
//============================================ getNetworkIP ======================================
//================================================================================================
const getNetworkIP = () => {
try {
wifi.getIP((ip) => {
console.log(ip);
});
}
catch (err) {
console.warn(err)
}
}
//================================================================================================
//============================================ getNetworkIP ======================================
//================================================================================================
const connectNetwork = () => {
try {
wifi.findAndConnect("ESP32", "Password", (found) => {
if (found) {
console.log("wifi is in range");
} else {
console.log("wifi is not in range");
}
});
}
catch (err) {
console.warn(err)
}
}
//================================================================================================
//==================================== disconnectNetwork =========================================
//================================================================================================
const disconnectNetwork = () => {
wifi.disconnect();
}
//================================================================================================
//=================================== loadSSIDList ===============================================
//================================================================================================
const loadSSIDList = () => {
/*
wifiStringList is a stringified JSONArray with the following fields for each scanned wifi
{
"SSID": "The network name",
"BSSID": "The address of the access point",
"capabilities": "Describes the authentication, key management, and encryption schemes supported by the access point"
"frequency":"The primary 20 MHz frequency (in MHz) of the channel over which the client is communicating with the access point",
"level":"The detected signal level in dBm, also known as the RSSI. (Remember its a negative value)",
"timestamp":"Timestamp in microseconds (since boot) when this result was last seen"
}
*/
wifi.loadWifiList((wifiStringList) => {
var wifiArray = JSON.parse(wifiStringList);
console.log(wifiArray);
},
(error) => {
console.log(error);
}
);
}
//================================================================================================-
//=================================== App Class ==================================================
//================================================================================================
class App extends Component {
componentDidMount = () => {
getData();
}
render () {
try {
const granted = PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
} catch (err) {
console.warn(err)
}
return (
<View style={styles.view}>
<Text style={styles.text}>My WiFi App</Text>
<Button title="Get SSID" onPress={getWiFiSSID} />
<Button title="Get BSSID" onPress={getWiFiBSSID} />
<Button title="Enable WiFi" onPress={enableWiFi} />
<Button title="Disable WiFi" onPress={disableWiFi} />
<Button title="List SSIDs" onPress={loadSSIDList} />
<Button title="Check Connection" onPress={checkConnected} />
<Button title="Get Network IP" onPress={getNetworkIP} />
<Button title="Connect Network" onPress={connectNetwork} />
<Button title="Disconnect Network" onPress={disconnectNetwork} />
<Button title="Get Data" onPress={getData} />
</View>
)
}
}
export default App;
Code: Select all
#include <esp_wifi.h>
#include <esp_event.h>
#include <esp_log.h>
#include <esp_system.h>
#include <nvs_flash.h>
#include <sys/param.h>
#include "esp_netif.h"
#include "esp_eth.h"
#include "protocol_examples_common.h"
#include <esp_https_server.h>
#define EXAMPLE_ESP_WIFI_SSID "ESP32"//"ESP32"
#define EXAMPLE_ESP_WIFI_PASS "password"//"password"
#define EXAMPLE_ESP_WIFI_CHANNEL 1 //CONFIG_ESP_WIFI_CHANNEL
#define EXAMPLE_MAX_STA_CONN 4 //CONFIG_ESP_MAX_STA_CONN
static const char *TAG = "example";
/* An HTTP GET handler */
static esp_err_t root_get_handler(httpd_req_t *req)
{
httpd_resp_set_type(req, "text/html");
httpd_resp_send(req, "<h1>Hello Secure World!</h1>", HTTPD_RESP_USE_STRLEN);
return ESP_OK;
}
static const httpd_uri_t root = {
.uri = "/hello",
.method = HTTP_GET,
.handler = root_get_handler
};
static httpd_handle_t start_webserver(void)
{
httpd_handle_t server = NULL;
// Start the httpd server
ESP_LOGI(TAG, "Starting server");
httpd_ssl_config_t conf = HTTPD_SSL_CONFIG_DEFAULT();
extern const unsigned char cacert_pem_start[] asm("_binary_cacert_pem_start");
extern const unsigned char cacert_pem_end[] asm("_binary_cacert_pem_end");
conf.cacert_pem = cacert_pem_start;
conf.cacert_len = cacert_pem_end - cacert_pem_start;
extern const unsigned char prvtkey_pem_start[] asm("_binary_prvtkey_pem_start");
extern const unsigned char prvtkey_pem_end[] asm("_binary_prvtkey_pem_end");
conf.prvtkey_pem = prvtkey_pem_start;
conf.prvtkey_len = prvtkey_pem_end - prvtkey_pem_start;
esp_err_t ret = httpd_ssl_start(&server, &conf);
if (ESP_OK != ret) {
ESP_LOGI(TAG, "Error starting server!");
return NULL;
}
// Set URI handlers
ESP_LOGI(TAG, "Registering URI handlers");
httpd_register_uri_handler(server, &root);
return server;
}
static void stop_webserver(httpd_handle_t server)
{
// Stop the httpd server
httpd_ssl_stop(server);
}
static void disconnect_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
httpd_handle_t* server = (httpd_handle_t*) arg;
if (*server) {
stop_webserver(*server);
*server = NULL;
}
}
static void connect_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
httpd_handle_t* server = (httpd_handle_t*) arg;
if (*server == NULL) {
*server = start_webserver();
}
}
//############################################################################
//############################################################################
//############################################################################
static void wifi_event_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
if (event_id == WIFI_EVENT_AP_STACONNECTED) {
wifi_event_ap_staconnected_t* event = (wifi_event_ap_staconnected_t*) event_data;
ESP_LOGI(TAG, "station "MACSTR" join, AID=%d",
MAC2STR(event->mac), event->aid);
} else if (event_id == WIFI_EVENT_AP_STADISCONNECTED) {
wifi_event_ap_stadisconnected_t* event = (wifi_event_ap_stadisconnected_t*) event_data;
ESP_LOGI(TAG, "station "MACSTR" leave, AID=%d",
MAC2STR(event->mac), event->aid);
}
}
void wifi_init_softap(void)
{
ESP_ERROR_CHECK(esp_netif_init());
ESP_ERROR_CHECK(esp_event_loop_create_default());
esp_netif_create_default_wifi_ap();
wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
ESP_ERROR_CHECK(esp_wifi_init(&cfg));
ESP_ERROR_CHECK(esp_event_handler_instance_register(WIFI_EVENT,
ESP_EVENT_ANY_ID,
&wifi_event_handler,
NULL,
NULL));
wifi_config_t wifi_config = {
.ap = {
.ssid = EXAMPLE_ESP_WIFI_SSID,
.ssid_len = strlen(EXAMPLE_ESP_WIFI_SSID),
.channel = EXAMPLE_ESP_WIFI_CHANNEL,
.password = EXAMPLE_ESP_WIFI_PASS,
.max_connection = EXAMPLE_MAX_STA_CONN,
.authmode = WIFI_AUTH_WPA_WPA2_PSK
},
};
if (strlen(EXAMPLE_ESP_WIFI_PASS) == 0) {
wifi_config.ap.authmode = WIFI_AUTH_OPEN;
}
ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_AP));
ESP_ERROR_CHECK(esp_wifi_set_config(WIFI_IF_AP, &wifi_config));
ESP_ERROR_CHECK(esp_wifi_start());
ESP_LOGI(TAG, "wifi_init_softap completed. SSID:%s password:%s channel:%d",
EXAMPLE_ESP_WIFI_SSID, EXAMPLE_ESP_WIFI_PASS, EXAMPLE_ESP_WIFI_CHANNEL);
}
//############################################################################
//############################################################################
//############################################################################
void app_main(void)
{
static httpd_handle_t server = NULL;
ESP_ERROR_CHECK(nvs_flash_init());
ESP_ERROR_CHECK(esp_netif_init());
//ESP_ERROR_CHECK(esp_event_loop_create_default());
wifi_init_softap(); //added
start_webserver();//added
/* Register event handlers to start server when Wi-Fi or Ethernet is connected,
* and stop server when disconnection happens.
*/
// #ifdef CONFIG_EXAMPLE_CONNECT_WIFI
// ESP_ERROR_CHECK(esp_event_handler_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &connect_handler, &server));
// ESP_ERROR_CHECK(esp_event_handler_register(WIFI_EVENT, WIFI_EVENT_STA_DISCONNECTED, &disconnect_handler, &server));
// #endif // CONFIG_EXAMPLE_CONNECT_WIFI
// #ifdef CONFIG_EXAMPLE_CONNECT_ETHERNET
// ESP_ERROR_CHECK(esp_event_handler_register(IP_EVENT, IP_EVENT_ETH_GOT_IP, &connect_handler, &server));
// ESP_ERROR_CHECK(esp_event_handler_register(ETH_EVENT, ETHERNET_EVENT_DISCONNECTED, &disconnect_handler, &server));
// #endif // CONFIG_EXAMPLE_CONNECT_ETHERNET
/* This helper function configures Wi-Fi or Ethernet, as selected in menuconfig.
* Read "Establishing Wi-Fi or Ethernet Connection" section in
* examples/protocols/README.md for more information about this function.
*/
//ESP_ERROR_CHECK(example_connect());
}