java - Node.js and Websocket in Android Eclipse

Question

Thanks for looking into my question.

I am a beginner in android development and currently i am trying to make chat app which uses socket and node js.

I used a library from github i.e https://github.com/Gottox/socket.io-java-client and was able to send message to my server and i was able to receive back message as well under "new_client_message" which is shown in the logcat image below.

The problem i am facing is that i cannot figure out the way to get the messages from the server to display it in a list view. It would be great if anyone could help me out. Thanks in advance

My LogCat:

Node.js Code:

var socket = require('socket.io');
var express = require('express');
var http = require('http');

var app = express();
var server = http.createServer(app);

var io = socket.listen(server);

var users = {};
var clients = {};

io.sockets.on( 'connection', function(socket) {
console.log("New client !");
var socket_id = socket.id;
var hs = socket.handshake;
//store user with socket id
if(hs.query.user_id !== undefined){
    users[hs.query.user_id] = socket.id; // connected user with its     socket.id

}

clients[socket.id] = socket; // add the client data to the hash

socket.on('disconnect', function () {
    delete clients[socket.id]; // remove the client from the array
    delete users[hs.query.username]; // remove connected user & socket.id
});

socket
    .on('new_message', function(data){
        clients[users['admin']].emit('new_message', {'original_data':data,'socket_id': socket_id } );
    })
    .on('new_client_message', function(data){
        console.log(data);
        clients[data.socket_id].emit('new_client_message', data.message);
    })
;

});

server.listen(3030);

And here is my code:

socket = null;
    try {
        socket = new SocketIO("http://xxx.xxx.xx.xx:3030/");
    } catch (MalformedURLException e1) {
        // TODO Auto-generated catch block
        e1.printStackTrace();
    }
    socket.connect(new IOCallback() {
        @Override
        public void onMessage(JSONObject json, IOAcknowledge ack) {
            try {
                System.out.println("Server said:" + json.toString(2));
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }

        @Override
        public void onMessage(String data, IOAcknowledge ack) {
            System.out.println("Server said: " + data);

        }

        @Override
        public void onError(SocketIOException socketIOException) {
            System.out.println("an Error occured");
            socketIOException.printStackTrace();
        }

        @Override
        public void onDisconnect() {
            System.out.println("Connection terminated.");
        }

        @Override
        public void onConnect() {
            System.out.println("Connection established");
        }

      //here I was trying to get the message from the server, convert into string and 
      //display in list view(thats when the error displayed)

        @Override
        public void on(String event, IOAcknowledge ack, Object... args) {
            System.out.println("Server triggered event '" + event + "'");
            System.out.println("senrver ack" + ack);
            System.out.println("server said this " + args[0]);

            rohan = args[0].toString();


            mListData.add(rohan);
            //mListData.add(args[0].toString());

        }


    });

    //mListData.add(rohan);

  //sending the message from the app when onclick to the server which is sucessful

    send.setOnClickListener(new OnClickListener(){

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub


            // This line is cached until the connection is establisched.
            //socket.send("new_message");



            chat = messag.getText().toString();

            karan = client_email+";"+chat;

         // This line is cached until the connection is establisched.
            socket.emit("new_message", karan);
            click();




        }

        private void click() {
            // TODO Auto-generated method stub
            //getting the username
            name = getIntent().getExtras().getString("name");
            String output = name.substring(0,1).toUpperCase() + name.substring(1);


            // converting the TextView message to string
            msg = messag.getText().toString();

            // combining the username and the text view
            messag.setText(output +" " + ":" + " " + msg);

            //showing the final combination in the listview
            mListData.addAll(messag.getText().toString());

            messag.setText("");

            //when the list view is updated with data, then it goes to that position
            lvList.setSelection(mListData.getCount() -1);
            post();

        }

Please guide me where should i add further code to diplay the message from the node.js server in the listview. I am sure that i am making some mistake and i would appreciate if someone could correct me. Much thanks !

Answer 1

Hy Karan.. you are going in the right way mate. The only thing that is missing is the small snippet of code. Error here is that you set adapter in working thread. You can update views only from main thread. You have to move the portion of the background task that updates the ui onto the main thread. Just replace the code on:

@Override
            public void on(String event, IOAcknowledge ack, Object... args)

with:

@Override
            public void on(String event, IOAcknowledge ack, Object... args) {
                // TODO Auto-generated method stub
                if(event.equals("new_client_message")){
                    Log.v("SocketIO", "new_client_message" + " " + args[0]);
                    rohan = args[0].toString();
                    System.out.println("admin" + " : " + " " + rohan);

                    runOnUiThread(new Runnable(){

                        @Override
                        public void run() {
                            // TODO Auto-generated method stub
                            mListData.add("Admin" + " : " + " " + rohan);
                            mListData.notifyDataSetChanged();
                            lvList.setSelection(mListData.getCount() -1);

                        }

                    });
                }

here "new_client_message" is trigger from the server.. just replace with yours. For example in you case "new_message" is the trigger from your app to the server. Sorry for not a professional word but i hope it will help. Cheers