Exchange data between mobile devices

[daniel...@gmail.com]

What is the best way to quickly exchange data between two mobile devices? I've tried using Bluetooth and Web Sockets, but I've been told that DroidScript doesn't allow this kind of exchange over Bluetooth, and I haven't been able to figure out how to use Web Sockets because the only code sample I could find demonstrated how to exchange data between a mobile device and a browser window, not between two devices. My intention is to create a game where two or more people can virtually interact with each other; how can I do that?

[sankarshan dudhate]

WebSockets are quite good actually.

As you're working on a game, you might want to send JSON objects over websockets. I've tried using them and it works. You should use JSON.stringify( JSONObject ) from the server-side and JSON.parse( incomingString ) on the receiver side ( i.e. Socket ).

You can do anything with sockets. They're quite reliable. Do let us know how you progress.

Regards,
Sankarshan

[Dave Smart]

Hi Daniel,

You can take the web socket code from that browser client and just put it in a normal DroidScript app. 

Also, if you create a web server on both devices then you will be able to start a conversation from either device.

Regards

David

[Dave Smart]

P.S.

You can use standard HTML WebSockets or you can use the app.CreateWebSocket method and it will create a reliable socket object that will attempt to keep a connection open with the other end at all times (re-trying every 7 seconds to connect).

It would be useful if someone created a little two way WebSocket chat sample... anyone up to the job?

[Alex F]

I'll try it^^

[Alex F]

Can you please explain how to create the websocket (what is useful for ip, port etc) an how to send/receive txt msgs?

[Alex F]

He're the Basics:

var name=null;

function OnStart() {
lay = app.CreateLayout( "linear", "FillXY,HCenter" );
layChat = app.CreateScroller( 1,0.9 );
layChat.SetBackColor( "blue" );
chat= app.CreateLayout( "Linear", "FillXY" );
layChat.AddChild( chat );
lay.AddChild( layChat );

// skt= app.CreateWebSocket( "111","222","1" );

laySend= app.CreateLayout( "Linear", "Horizontal" );
msg= app.CreateTextEdit( "",0.8,0.07 );
msg.SetHint( "message" );
laySend.AddChild( msg );

btnSend= app.CreateButton( "[fa-send]", null,null, "fontawesome" );
btnSend.SetOnTouch( send );
laySend.AddChild( btnSend );
lay.AddChild( laySend );
app.AddLayout( lay );

ip = app.GetIPAddress();
if( ip == "0.0.0.0" ) {
app.ShowPopup( "Please Enable Wi-Fi" );
app.Exit();
}
app.PreventWifiSleep();

while ( name=="null" || name.indexOf(" ")>-1 ) name= prompt( "type in your name:","name" )
}

function send() {
app.HideKeyboard();
txt= app.CreateText( "["+name+"] : "+msg.GetText(),1,null,"left" );
msg.SetText( "" );
txt.SetTextSize( 15 );
txt.SetTextColor( "green" );
if ( txt != "") {
//send txt.GetText()
chat.AddChild( txt );
}
OnReceive()
}

function OnReceive()
{
txt= app.CreateText( "nomsg" /*get msg*/, 1,null, "left");
txt.SetTextSize( 15 );
txt.SetTextColor( "grey" );
chat.AddChild( txt );
}

[Chris Pankow]

I tried myself to create a simple "chatbox" using the Wifi-Demo-Sample.

But how to scroll the content in the textbox? When the messages reach the bottom, new messages do not appear.

And how can I set a max length for the input textbox?

If max length is 50, how can I count down what is left?

//This WiFi messaging sample broadcasts UDP network

//messages to every device inside your WiFi network (that

//is running this sample).  This sample could easily be

//extended to create a WiFi-Chat Application or used as

//starting point for a multi-player Wifi game.

//(Note: A few routers block fast UDP messages by default)

//Called when application is started.

function OnStart()

{

//Create a layout with objects vertically centered.

lay = app.CreateLayout( "linear", "VCenter,FillXY" );

    txt_label = app.CreateText( "Chatbox" );

    lay.AddChild( txt_label );

txt_chat = app.CreateText( "", 0.5, 0.6, "MultiLine" );

lay.AddChild( txt_chat );

txt_msg = app.CreateTextEdit( "", 0.5, 0.1, "Autoselect,Center,SingleLine" );

lay.AddChild( txt_msg );

//Create a button.

btn = app.CreateButton( "Send", 0.3, 0.1 );

btn.SetMargins( 0, 0.05, 0, 0 );

lay.AddChild( btn );

btn.SetOnTouch( btn_OnTouch );

//Add layout to app.

app.AddLayout( lay );

//Create UDP network object.

net = app.CreateNetClient( "UDP" );

//Get the UDP broadcast address and set our port number.

address = net.GetBroadcastAddress();

port = 19700;

//Get our MAC address (to serve as a device id).

mac = app.GetMacAddress();

//Start timer to check for incoming messages.

setInterval( CheckForMsg, 200 );

}

//Called when user touches our button.

function btn_OnTouch()

{

    //Broadcast our Datagram (UDP) packet.

    var msg = txt_msg.GetText();

    if(msg != "")

    {

    var packet = mac + "|" + mac + ": " + msg;

net.SendDatagram( packet, "UTF-8", address, port );

txt_msg.SetText( "" );

    }

    else

    {

    app.ShowPopup( "no message", "Short" );

    }

}

//Called by our interval timer.

function CheckForMsg()

{

    //Try to read a packet for 1 millisec.

var packet = net.ReceiveDatagram( "UTF-8", port, 1 );

if( packet ) 

{ 

   //Extract original parts.

   parts = packet.split("|");

   var id = parts[0];

   var msg = parts[1]; 

  

   //Show the message if not sent by this device.

   if( id != mac )

   app.ShowPopup( msg);

   s = txt_chat.GetText();

   txt_chat.SetText( s + "\n" + msg );

}

}

[Alex F]

I took the liberty to copy your send/receive solution. Hope that's ok for you ;)

Heres my chat sample:

var name=null;

function OnStart() {
lay = app.CreateLayout( "linear", "FillXY,HCenter" );
layChat = app.CreateScroller( 1,0.9 );
layChat.SetBackColor( "blue" );
chat= app.CreateLayout( "Linear", "FillXY" );
layChat.AddChild( chat );
lay.AddChild( layChat );

laySend= app.CreateLayout( "Linear", "Horizontal" );
msg= app.CreateTextEdit( "",0.8,0.07 );
msg.SetHint( "message" );
laySend.AddChild( msg );

btnSend= app.CreateButton( "[fa-send]", null,null, "fontawesome" );
btnSend.SetOnTouch( send );
laySend.AddChild( btnSend );
lay.AddChild( laySend );
app.AddLayout( lay );

ip = app.GetIPAddress();
if( ip == "0.0.0.0" ) {
app.ShowPopup( "Please Enable Wi-Fi" );
app.Exit();
}

net = app.CreateNetClient( "UDP" );

address = net.GetBroadcastAddress();
port = 19700;

mac = app.GetMacAddress();
setInterval( CheckForMsg );

while ( name=="null" || name.indexOf(" ")>-1 ) name= prompt( "type in your name:","" )
}

function send() {
app.HideKeyboard();
txt= app.CreateText( "["+name+"] : "+msg.GetText(),1,null,"left" );
msg.SetText( "" );
txt.SetTextSize( 15 );
txt.SetTextColor( "green" );
if ( txt != "" ) {

net.SendDatagram( mac+"|"+txt.GetText(), "UTF-8", address, port );
chat.AddChild( txt );
}
}

function CheckForMsg() {
var text = net.ReceiveDatagram( "UTF-8", port, 1 );
if( text && text.split("|")[0] != mac ) {
txt= app.CreateText( text, 1,null, "left");
txt.SetTextSize( 15 );
txt.SetTextColor( "white" );
chat.AddChild( txt );
}
}

[Alex F]

Heres the link to my sample.
I added a message send when the user comes online or goes offline.

https://www.dropbox.com/sh/n58tatyud37lfla/AAAhrB7fwfjbzyaIAkefnkrta?dl=0

I think you must be connected with the same netwirk to use this right? Is it possible to send in all networks?

[Chris Pankow]

Feel free to use it, it is from the samples. Now it's a nice little local chat.

Could you show us your code for the user online/offline solution? And where to add?

Is it possible to Autoscroll to the last message? Now when the screen is full with messages

the user has to scroll manually.

I think with this solution you have to use the same WiFi Network. Another solution could be to save

the chat messages on a server and communicate via something out of the HTTP-Get-Sample.

[Alex F]

Ok I added auto scroll and txt file now.
I have no idea how to send/receive data offline (no wifi/bluetooth)
I'll add it if someone tells me :)

[Alex F]

Sry autoscroll didn't worked correctly. Works now 😅

[Chris Pankow]

Nice, thank you for uploading.

Autoscroll is still not working for me. I have to scroll manually for the last messages (tested on two devices).

Any idea on input textbox and max length? Or how to count this?

[Alex F]

Try again to download.
Length= msg.length

[Chris Pankow]

I still have issues with the scrolling. Every second or third "send" doesn't show up correctly. With the next "send" it shows two messages.

[Alex F]

Scroll is layChat.ScrollTo( 0, chat.GetHeight( ));

[Alex F]

it is not entirely true that you can not save the chat. I'll tell you if I'm finished

[Alex F]

Ok I added:
-save & clear chat
-auto save when closed with back button or menu
-delete single messages
-colored messages!!!
use <c0000ff> or <cyellow> for example

[Dave Smart]

Hi Guys,

I'm really pleased to see you guys collaborating on this app :)

Unfortunately I don't have time right now to follow your progress closely, but I would like to see a really simple clean and commented chat demo that is suitable to go on the downloadable demos section of the WiFi editor.  So before you go too far and give it all the 'Bells and Whistles' can someone please isolate a simple and clean version.  Thanks :)

Here is an idea for the advanced version (if no one has mentioned it already).. Use reliable Websockets for the comms, but use UDP to broadcast the availability of the chat server (or even every client device in the local Wifi) - broadcast packet includes the server IP address.

Regards

David

[Netpower8]

nice suggestion dave.

[Alex F]

Dave I work on sankarshans code and remove all special stuff. Sry sankarshan ^^

[Alex F]

Heres the simple chat:
Can you tell me please how to implement daves UDP stuff?

var status
dlg=false;

//Called when application is started.
function OnStart()
{

if (dlg) dlg.Hide();

//check iWiFi is enabled
if( app.GetIPAddress() == "0.0.0.0" ) { retry(); return }

//Create a layout with objects vertically centered.

lay=app.CreateLayout("linear","FillXY");

//create dailog
dlg=app.CreateDialog("","NoTitle,NoCancel");
layDlg=app.CreateLayout("Linear","FillXY");
layClient= app.CreateLayout( "Linear", "Horizontal" );

//create text edit to enter the key
edtKey= app.CreateTextEdit( "", 0.5, null, "singleline");
layClient.AddChild( edtKey );

//create button to prepare the client
btnClient= app.CreateButton( "Client" );
btnClient.SetOnTouch( getInput );
layClient.AddChild( btnClient );
layDlg.AddChild( layClient );

layHost= app.CreateLayout( "Linear", "Horizontal" );

//create text shows the key to give it the clients
txtKey= app.CreateText( app.GetIPAddress()+":0808", 0.5);
txtKey.SetTextSize(20)
layHost.AddChild( txtKey );

//create button to prepare the host
btnHost= app.CreateButton( "Host" );
btnHost.SetOnTouch( getInput );
layHost.AddChild( btnHost );
layDlg.AddChild( layHost );

//create button to exit the app
btnExit= app.CreateButton( "exit" );
btnExit.SetOnTouch( getInput );
btnExit.SetMargins( 0.2 );
layDlg.AddChild( btnExit );

dlg.AddLayout(layDlg);
dlg.Show();

//create scroller to scroll the chat
scroll=app.CreateScroller(1,0.9);
layScroll=app.CreateLayout("Linear");

//create the chat
chat=app.CreateText("",1,1,"MultiLine,Log");
chat.SetTextColor("black");
chat.SetBackColor("white");
chat.SetTextSize(20);
layScroll.AddChild(chat);

scroll.AddChild(layScroll);
lay.AddChild(scroll);

//layout for sending stuff
layMsg=app.CreateLayout("Linear","FillXY,Horizontal");
layMsg.SetBackColor("grey");

//create message edit
edtMsg=app.CreateTextEdit("",0.8,0.07,"MultiLine")
layMsg.AddChild(edtMsg);

//create 'send' buttom
btnSend=app.CreateButton("[fa-share]",null,0.07,"FontAwesome");
btnSend.SetTextColor("#000000");
btnSend.SetOnTouch(SendMessage);
layMsg.AddChild(btnSend);
lay.AddChild(layMsg);

//Add layout to app.
app.AddLayout(lay);
}

function getInput()
{
status= this.GetText();
if (status == "exit") app.Exit()
dlg.Hide();

if (status== "host") {

//create local server
serv=app.CreateWebServer("8080");
serv.SetFolder("/sdcard/DroidScript/DSChat");
serv.SetOnReceive(ServerOnReceive);
serv.Start();
}

if (status == "client") {

//check and exit if the device doesn't support web sockets
if(!window.WebSocket) {
alert("This device doesn't support web sockets.");
app.Exit();
}

//create the web socket
key= edtKey.GetText();
socket=new WebSocket("ws://"+key);
socket.onopen=OnSocketOpen;
socket.onmessage=OnSocketMessage;
socket.onerror=OnSocketError;
}
}

//tells the user when succesfully connected
function OnSocketOpen() {
app.ShowPopup("Connnected.","Short");
dlg.Hide();
}

//write received message from clients
function ServerOnReceive(msg,ip) { chat.Log(msg) }

//write received message
function OnSocketMessage(msg) { chat.Log(msg.data) }

//shows the error if this is the case
function OnSocketError(e) { alert("SocketError:"+e.data) }

function SendMessage() {

//get message
msg=edtMsg.GetText();
app.HideKeyboard();
edtMsg.SetText("");

//check last message for match or empty
hist= chat.GetText().split("\n");
if(msg!="" && hist[hist.length-2] != msg) {

//send message
if(status=="host")serv.SendText(msg);
if(status=="Client")socket.send(msg);

//add message to users chat
chat.Log(msg);
}
}

function retry() {
dlg= app.CreateDialog( "Please Enable Wi-Fi", "NoCancel");
laydlg= app.CreateLayout( "Linear", "Horizontal" );

//create retry button
btnRetry= app.CreateButton( "retry", 0.5,0.08, "gray")
btnRetry.SetOnTouch( OnStart );
laydlg.AddChild( btnRetry );

//create exit button
btnExit= app.CreateButton( "exit", 0.2,0.08, "gray")
btnExit.SetOnTouch( getInput );
laydlg.AddChild( btnExit );

laydlg.AddChild( btnRetry );
dlg.AddLayout( laydlg );
dlg.Show();
}

[Alex F]

Sry the name of btnHost and btnClient must be "host" and "client" ^^

[Netpower8]

Dave was mentioning on the udp just broadcast the web socket server ip. So that somebody with the app gets the udp msg knows where to connect to which web socket server without actually typing the ip of the server anymore.

[Alex F]

Can someone else please add this -.-
I want to find out how firebase works

[Chris Pankow]

Ok guys, I tackled the one with the implementing of UDP broadcasting of the host ID. Due to that I changed a few things but nothing big.

Now we have:

- dialog shows message "no hosts in range"

- message changes to the host id (ip+port) if one is in Range

- buttons: client, host, exit

- if you hit the button "client" and no host is in range an alert appears with the hint to press host

- if a host is in range it's shown in the message and you can simply connect by clicking the client button

- if a host already exists you cannot be another one (alert appears)

I think that's as simple as Dave wanted it.

var status

dlg=false;

//Called when application is started.

function OnStart()

{

    if (dlg) dlg.Hide();

        

    //check iWiFi is enabled

    if( app.GetIPAddress() == "0.0.0.0" ) { retry(); return }

    //Create a layout with objects vertically centered.

    lay=app.CreateLayout("Linear","FillXY");

    //create dailog

    dlg=app.CreateDialog("","NoTitle,NoCancel");

        layDlg=app.CreateLayout("Linear","FillXY");

                

            //create text edit to enter the key

            txtKey= app.CreateText( "no hosts in range", 0.4, null, "Multiline" );

            layDlg.AddChild( txtKey );

                                

            //create button to prepare the client

            btnClient= app.CreateButton( "client" );

            btnClient.SetOnTouch( getInput );

            layDlg.AddChild( btnClient );

            //create button to prepare the host

            btnHost= app.CreateButton( "host" );

            btnHost.SetOnTouch( getInput );

            layDlg.AddChild( btnHost );                             

            //create button to exit the app

            btnExit= app.CreateButton( "exit" );

            btnExit.SetOnTouch( getInput );

//Create UDP network object for broadcasting our host id.

net = app.CreateNetClient( "UDP" );

//Get the UDP broadcast address and set our port number.

address = net.GetBroadcastAddress();

port = 19700;

//Get our MAC address (to serve as a device id).

mac = app.GetMacAddress();

//Start timer to check for incoming host ids.

setInterval( CheckForHosts, 1000 );

//Start timer to send our host id continually if we are host.

setInterval( SendHostId, 1000 );

}

function getInput()

{

    status= this.GetText();

    if (status == "exit") app.Exit()

    dlg.Hide();

        

    if (status== "host") {

        key= txtKey.GetText();

        if( key == "no hosts in range" )

        {

        //create local server

        serv=app.CreateWebServer("8080");

        serv.SetFolder("/sdcard/DroidScript/DSChat");

        serv.SetOnReceive(ServerOnReceive);

        serv.Start();

        }

        else

        {

        app.Alert( "There is already a host in range. Press client Button to connect." );

        dlg.Show();

        }

    }

        

    if (status == "client") {

        

        //check and exit if the device doesn't support web sockets

        if(!window.WebSocket) {

        alert("This device doesn't support web sockets.");

        app.Exit();

        }

        

        //create the web socket

        key= txtKey.GetText();

        if( key != "no hosts in range" )

        {

        socket=new WebSocket("ws://"+key);

        socket.onopen=OnSocketOpen;

        socket.onmessage=OnSocketMessage;

        socket.onerror=OnSocketError;

        }

        else

        app.Alert( "No Hosts found in Range. Serv as host and press host Button." );

        dlg.Show();

    }

}

//tells the user when succesfully connected

function OnSocketOpen() {

        app.ShowPopup("Connnected.","Short");

        dlg.Hide();

}

//write received message from clients

function ServerOnReceive(msg,ip) { chat.Log(msg) }

//write received message

function OnSocketMessage(msg) { chat.Log(msg.data) }

//shows the error if this is the case

function OnSocketError(e) { alert("SocketError:"+e.data)  }

function SendMessage() {

        //get message

        msg=edtMsg.GetText();

        app.HideKeyboard();

        edtMsg.SetText("");

        //check last message for match or empty

        hist= chat.GetText().split("\n");

        if(msg!="" && hist[hist.length-2] != msg) {

            //send message

            if(status=="host")serv.SendText(msg);

            if(status=="client")socket.send(msg);

            //add message to users chat

            chat.Log(msg);

    }

}

function retry() {

    dlg= app.CreateDialog( "Please Enable Wi-Fi", "NoCancel");

        laydlg= app.CreateLayout( "Linear", "Horizontal" );

                

            //create retry button

            btnRetry= app.CreateButton( "retry", 0.5,0.08, "gray")

            btnRetry.SetOnTouch( OnStart );

            laydlg.AddChild( btnRetry );

                        

            //create exit button

            btnExit= app.CreateButton( "exit", 0.2,0.08, "gray")

            btnExit.SetOnTouch( getInput );

            laydlg.AddChild( btnExit );

                        

            laydlg.AddChild( btnRetry );

    dlg.AddLayout( laydlg );

    dlg.Show();

}

//Called by our interval timer.

function CheckForHosts()

{

    //Try to read a packet for 1 millisec.

var packet = net.ReceiveDatagram( "UTF-8", port, 1 );

if( packet ) 

{ 

   //Extract original parts.

   parts = packet.split("|");

   var id = parts[0];

   var msg = parts[1]; 

  

   //Show the broadcasted host id from other devices ( if not sent by this device ).

   if( id != mac )

   txtKey.SetText( msg );

}

}

//Called by our interval timer. Broadcast our key to other devices if we are host.

function SendHostId()

{

    //Broadcast our Datagram (UDP) packet but only if we are host.

    if(status=="host")

    {

        var msg = app.GetIPAddress()+":8080"

            if(msg != "")

            {

            var packet = mac + "|" +  msg;

       net.SendDatagram( packet, "UTF-8", address, port );

            }

            else

            {

            app.ShowPopup( "No ip / port, check connection.", "Short" );

            }

    }

}

[Alex F]

Nice thanks. I'll try to simplify if it is possible

[Alex F]

I changed a bit. For example the checkForHost was cleared after got input and sendHost interval sezs in getInput function.
You cant write if(msg=="") in sendHost if you write in previous line msg=..
+"0808"
And I think it is not important to check if the server was created by the same device.
So heres the (i think final) code:

var status;
dlg=false;

searchHost= setInterval( CheckForHosts, 1000 );
}

function getInput()
{
status= this.GetText();
if (status == "exit") app.Exit()
dlg.Hide();

clearInterval( searchHost );

if (status== "host") {
key= txtKey.GetText();
if( key == "no hosts in range" )
{
//create local server
serv=app.CreateWebServer("8080");
serv.SetFolder("/sdcard/DroidScript/DSChat");
serv.SetOnReceive(ServerOnReceive);
serv.Start();

//Start timer to send our host id continually if we are host.

sendHost= setInterval( SendHostId, 1000 );

function SendMessage() {

//Show the broadcasted host id

if( packet ) txtKey.SetText( packet);
}

//Called by our interval timer. Broadcast our key to other devices if we are host.
function SendHostId()
{

var msg = app.GetIPAddress()
if(msg != "0.0.0.0") {
var packet = mac + "|" + msg+":0808";

net.SendDatagram( packet, "UTF-8", address, port );
}
else {
app.ShowPopup( "No ip / port, check connection.", "Short" );

//clears sendHost interval to avoid multiple shown retry dlg
clearInterval( sendHost );
retry();
}
}

[Alex F]

I don't like the auto - hide quoted text - :(

[Chris Pankow]

This is working fine, no problem using that:
var msg = xxx + ":8080";
if(msg == xxx) ....
No idea where you're trying to pointing at, please explain.

You write the wrong port every time (0808 is wrong). Just a hint.

I would not clear the "send host" interval... so another device can join. But using it in the getInput-function sounds good.

I agree with the "check for host"-interval, that interval could end after clicking the client-button.

I do not know why you put the complete packet content in the txtKey... with your editing "packet" still consists of mac address + msg(ip) + port.

I had no multiple retry dialog, you?

[Alex F]

- if you write this msg= smth.GetText()+port you cant write if msg!="" (i remember he wrote this) cauz you addes the port to the string. So it is every time if ip failed port.

- Sry with the port thing ^^

- The send host interval was only cleared if the connection failed. So it is ok.


- Sry for forgot the changing. heres the line again

var msg = app.GetIPAddress()
    if(msg != "0.0.0.0") {

        var packet = msg+":8080";

- I had multiple retry dialog if the connection failed after opening the host. (Join host; put wifi off)
thats why i cleared the sendhist interval cauz this was the reason of multiple dialogs.

[daniel...@gmail.com]

I don't suppose there's anything like WebSockets that can be used without an external Wifi network, is there?

[Steve Garman]

No.

But if the problem is the lack of a router,  you might consider setting up a hotspot on one device and using websockets.

[daniel...@gmail.com]

I suppose so... My concerns are that it could use up cell data and it would also be a bit too complicated to ask other people to do if I wanted to share the app with others. The hope was that the app would work regardless of any external networks whatsoever.

[Steve Garman]

On the narrow question of using up cell data, I turn off cell data (described as mobile data in the UK) when I use a hotspot as a local router.

However, I agree it is not a hoop you would want to ask users to jump through.

[sankarshan dudhate]

Hi guys,

I agree that it is really unfriendly but this technique is used by many popular apps like Xender, Zapya which are file sharing apps. That's where I got the idea from in the first place. Having said that, I'd always use this only as a last resort.