Skip to content

Embed tiny web server into Cordova with a plugin

Notifications You must be signed in to change notification settings

nVentis/cordova-httpd

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CorHttpd: embeded httpd for cordova

Forked to add a MIME-Type for .mjs files, allowing native usage of ES6 module syntax in Cordova Apps

Tested on Android. Be sure to import respective scripts from the hosted server.

To overcome the next obstacle when importing scripts (net::ERR_CLEARTEXT_NOT_PERMITTED), see https://stackoverflow.com/a/58892467/3362188 or follow these steps (copied from SO). Entering the port is neccessary.

add this to your CONFIG.XML, top of your code.

<access origin="*" />
<allow-navigation href="*" />

and this, under the platform android.

<edit-config file="app/src/main/AndroidManifest.xml" 
   mode="merge" target="/manifest/application" 
   xmlns:android="http://schemas.android.com/apk/res/android">
     <application android:usesCleartextTraffic="true" />
     <application android:networkSecurityConfig="@xml/network_security_config" />
 </edit-config>
 <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />

add the follow code to this file "resources/android/xml/network_security_config.xml" (create the file)

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
	<trust-anchors>
	    <certificates src="system" />
	</trust-anchors>
    </base-config>
    <domain-config cleartextTrafficPermitted="true">
	<domain includeSubdomains="true">localhost</domain>
	<domain includeSubdomains="true">localhost:port</domain>
    </domain-config>
</network-security-config>

Original README continue:

Supported platform:

  • iOS
  • Android

You can browse (locally or remotely) to access files in android/ios phone/pad:

  • browse the files in mobile device with a browser in PC.
  • copy files from mobile device to PC quickly, just with Wifi.
  • use cordova webview to access the assets/www/ content with http protocol.

Why http access is good?

  • Use wifi instead of cable, more convenient.
  • For security reason, browser does not support local AJAX calls. It's big bottle neck to deploy HTML5 games to Cordova platform.
  • The most popular phaser.js game engine, a httpd is always required, as it use AJAX to load resource.

How to use CorHttpd?

Add the plugin to your cordova project:

cordova plugin add https://github.com/floatinghotpot/cordova-httpd.git

Quick start, copy the demo files, and just build to play.

cp -r plugins/com.rjfun.cordova.httpd/test/* www/

Javascript APIs

startServer( options, success_callback, error_callback );

stopServer( success_callback, error_callback );

getURL( success_callback, error_callback );

getLocalPath( success_callback, error_callback );

Example code: (read the comments)

    var httpd = null;
    function onDeviceReady() {
        httpd = ( cordova && cordova.plugins && cordova.plugins.CorHttpd ) ? cordova.plugins.CorHttpd : null;
    }
    function updateStatus() {
    	document.getElementById('location').innerHTML = "document.location.href: " + document.location.href;
    	if( httpd ) {
    	  /* use this function to get status of httpd
    	  * if server is up, it will return http://<server's ip>:port/
    	  * if server is down, it will return empty string ""
    	  */
    		httpd.getURL(function(url){
    			if(url.length > 0) {
    				document.getElementById('url').innerHTML = "server is up: <a href='" + url + "' target='_blank'>" + url + "</a>";
    			} else {
    				document.getElementById('url').innerHTML = "server is down.";
    			}
    		});
    		// call this function to retrieve the local path of the www root dir
    		httpd.getLocalPath(function(path){
    			document.getElementById('localpath').innerHTML = "<br/>localPath: " + path;
        	});
    	} else {
    		alert('CorHttpd plugin not available/ready.');
    	}
    }
    function startServer( wwwroot ) {
    	if ( httpd ) {
    	    // before start, check whether its up or not
    	    httpd.getURL(function(url){
    	    	if(url.length > 0) {
    	    		document.getElementById('url').innerHTML = "server is up: <a href='" + url + "' target='_blank'>" + url + "</a>";
	    	    } else {
	    	        /* wwwroot is the root dir of web server, it can be absolute or relative path
	    	        * if a relative path is given, it will be relative to cordova assets/www/ in APK.
	    	        * "", by default, it will point to cordova assets/www/, it's good to use 'htdocs' for 'www/htdocs'
	    	        * if a absolute path is given, it will access file system.
	    	        * "/", set the root dir as the www root, it maybe a security issue, but very powerful to browse all dir
	    	        */
    	    	    httpd.startServer({
    	    	    	'www_root' : wwwroot,
    	    	    	'port' : 8080,
    	    	    	'localhost_only' : false
    	    	    }, function( url ){
    	    	      // if server is up, it will return the url of http://<server ip>:port/
    	    	      // the ip is the active network connection
    	    	      // if no wifi or no cell, "127.0.0.1" will be returned.
        	    		document.getElementById('url').innerHTML = "server is started: <a href='" + url + "' target='_blank'>" + url + "</a>";
    	    	    }, function( error ){
    	    	    	document.getElementById('url').innerHTML = 'failed to start server: ' + error;
    	    	    });
    	    	}
    	    	
    	    });
    	} else {
    		alert('CorHttpd plugin not available/ready.');
    	}
    }
    function stopServer() {
    	if ( httpd ) {
    	    // call this API to stop web server
    	    httpd.stopServer(function(){
    	    	document.getElementById('url').innerHTML = 'server is stopped.';
    	    },function( error ){
    	    	document.getElementById('url').innerHTML = 'failed to stop server' + error;
    	    });
    	} else {
    		alert('CorHttpd plugin not available/ready.');
    	}
    }

Credits

This Cordova plugin is built based on following 2 projects, and thanks to the authors.

  • NanoHTTPD, written in java, for java / android, by psh.
  • CocoaHTTPServer, written in Obj-C, for iOS / Mac OS X, by robbiehanson.

You can use this plugin for FREE. Feel free to fork, improve and send pull request.

If need prompt support, please buy a license, you will be supported with high priority.

More Cordova/PhoneGap plugins by Raymond Xie, find them in plugin registry.

Project outsourcing and consulting service is also available. Please contact us if you have the business needs.

About

Embed tiny web server into Cordova with a plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Objective-C 80.8%
  • Java 15.5%
  • HTML 3.4%
  • JavaScript 0.3%