{"id":1186,"date":"2014-05-22T14:29:40","date_gmt":"2014-05-22T14:29:40","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=1186"},"modified":"2014-05-22T14:29:40","modified_gmt":"2014-05-22T14:29:40","slug":"node-js-and-sencha-touch-chat","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/mobile-development\/node-js-and-sencha-touch-chat\/","title":{"rendered":"Node.js and Sencha Touch Chat"},"content":{"rendered":"

In this article we will implement a chat application<\/strong> for mobile devices that will work on both Android<\/strong> and iOS<\/strong>. In order to do so, we will need\u00a0knowledge of Sencha Touch<\/a> for the mobile application, Node.js<\/a> for server-side and MySQL<\/a> for the database. We can use this kind of application to communicate with other people needing only a smartphone and an internet connection.<\/p>\n

What we want from this application?<\/h3>\n

We want an application that allows us to communicate in real time with other users, with a login, so we can have our own account. We also want the messages to be saved somewhere, so we can view them anytime we want.<\/p>\n

How we structure the data?<\/h3>\n

In order achieve these objectives , first of all we need to think about how we structure the data For our sample there are going to be two data types, for users and messages.<\/p>\n

For the user data type, we will need 3 fields: a user id, that will be unique and will help us identify a specific user, a username used for display and a password that is required in order to authenticate the user.<\/p>\n

For the message data type we will need a message id, unique for each message, similar to the user id. Also we need the id of the user that sent the message and the id of the user that received it, the message content, and the message status that will mark if the message was read or not.<\/p>\n

The database<\/h3>\n

In order to save the data that we described earlier, we will create these two tables in MySQL<\/strong>:<\/p>\n

The users table:<\/p>\n

\r\nCREATE TABLE IF NOT EXISTS `bc_users` (\r\n    `user_id` int(10) unsigned NOT NULL AUTO_INCREMENT,\r\n    `user_username` varchar(100) NOT NULL,\r\n    `user_password` varchar(37) NOT NULL,\r\n    PRIMARY KEY (`user_id`)\r\n);\r\n<\/pre>\n
The messages table:<\/p>\n
\r\nCREATE TABLE IF NOT EXISTS `bc_messages` (\r\n    `message_id` int(10) unsigned NOT NULL AUTO_INCREMENT,\r\n    `message_from` int(10) unsigned NOT NULL,\r\n    `message_to` int(10) unsigned NOT NULL,\r\n    `message_content` text NOT NULL,\r\n    `message_read` tinyint(3) unsigned NOT NULL DEFAULT '0',\r\n    PRIMARY KEY (`message_id`)\r\n);\r\n\r\n<\/pre>\n
The server-side<\/h3>\n
This part will be developed using Node.js<\/strong>. Assuming that you have some\u00a0knowledge about this, we will start with the implementation. \u00a0First we are going to write some helpers that will provide the functions that we need in order to interact with the database.<\/p>\n
We will use a Node.js<\/strong> driver for database, named db-mysql<\/a>. Now, create a file named db.js<\/strong>, where we will require the driver, create the sql connection and connect to the sql server. This will look like this:<\/p>\n
\r\nvar mysql = require('db-mysql');\r\nvar config = require('.\/..\/config');\r\n\r\n\/\/create a new connection object\r\nvar sql_connection = new mysql.Database({\r\n    hostname: config.dbConfig.host,\r\n    user: config.dbConfig.user,\r\n    password: config.dbConfig.password,\r\n    database: config.dbConfig.database\r\n});\r\n\r\n\/\/connect to db\r\nsql_connection.connect(function(error) {\r\n    if (error) {\r\n        console.log('An error ocurred when connecting to database ' + error);\r\n        process.exit();\r\n    }\r\n});\r\n\r\nexports.connection = sql_connection;\r\n<\/pre>\n
Here we create the connection object, with the database credentials. After that we call the connect method of this object, with a callback function. If there is any error, we display it and stop the process. In the end, we add to the MySQL<\/strong> object the connection property, which is the database connection.<\/p>\n
Also we will need a helper for working with user passwords. For safety reasons we won’t save them exactly how the user writes them. For this, we choose the following algorithm: we generate a random string, five letters long. We add this string at the end of the user password, we call the MD5<\/a> hash function over this string, and finally, add the same random string at the beginning of the result. Please note that this approach is used for a mix of security but also simplicity since this is a tutorial. In “real world” applications you might want to use more advanced hashing algorithms and strategies.\u00a0 Assuming that randomString(5) is a function call that returns a 5 chars random string, the function described will look like this:<\/p>\n
\r\n\/\/crypt the password with the specified salt or a new one\r\nvar cryptPassword = function(password, salt) {\r\n    var randString = salt || randomString(config.saltLength);\r\n\r\n    return randString + crypto.createHash('md5').update(password + randString).digest('hex');\r\n};\r\n<\/pre>\n
After we create all helper functions that we need, we include all helpers in the main server file. Here we will create the HTTP server, like this:<\/p>\n
\r\n\/\/create the server\r\nvar server = http.createServer(function(request, response) {\r\n    request.on('end', function() {\r\n        response.writeHead(200, {'Content-Type': 'text\/html'});\r\n        response.end();\r\n    });\r\n}).listen(8081);\r\n\r\nvar conn = io.listen(server);\r\n<\/pre>\n
We will also need to keep track of connected users. So we will create two objects: clients and sockets. In clients objects we will store the connected user info, at the socket id key. In the sockets object, we will store the socket object at the user id key. After that, we will need to handle the following events: register<\/strong> for user register, login<\/strong> and auto_login<\/strong> for user authentication, get_users<\/strong> to get a full list of online users, message_sent<\/strong> triggered when sending a message, message_read<\/strong> for marking messages as read, get_conv_messages<\/strong> to load older messages, disconnect<\/strong> and logout<\/strong> for user disconnect event.<\/p>\n
We will see for example, the message_sent<\/strong> event handler:<\/p>\n
\r\n\/\/message sent event\r\nsocket.on('message_sent', function(message_to, message_content) {\r\n    \/\/get user id of sender\r\n    message_from = clients[socket.id].user_id;\r\n    \/\/save the message to db and get the id\r\n    var message_id = messages.save_message(message_from, message_to, message_content);\r\n\r\n    \/\/if there is a socket to send to\r\n    if (sockets[message_to]) {\r\n        \/\/send the message\r\n        sockets[message_to].emit('message_receive', message_from, message_content, message_id);\r\n    }\r\n});\r\n<\/pre>\n
In this handler, first, we get the user id from clients object, based on the id of the clients socket. We save the message to database and receive the new message id. Finally, if the recipient is connected (if the user id key exists in sockets object), we emit the new message to recipient socket.<\/p>\n
In the end, our Node.js<\/strong> application will have the following file structure:<\/p>\n
\"server<\/a><\/p>\n
The client-side<\/h3>\n
For the client side we will use the Sencha Touch<\/a> framework. Assuming that you already have base\u00a0knowledge about Sencha Touch<\/strong> and MVC<\/strong>, we will present only some aspects of the application.<\/p>\n
As we already know, we have two data types: the user and the message. In the client application we will have message and online user. We will create a model<\/a> for each one of them, that will look like the following:<\/p>\n
\r\nExt.define('App.model.Message', {\r\n    extend: 'Ext.data.Model',\r\n\r\n    config: {\r\n        fields: [\r\n             \/\/content of message\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0{name: 'message_content', type: 'string'},\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\/\/if true, message sent, if false, message received\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0{name: 'sent', type: 'boolean'},\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\/\/other user of conversation\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0{name: 'message_with', type: 'int'},\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\/\/date of message\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0{name: 'message_time', type: 'string'},\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\/\/0 if message unread, 1 if read\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0{name: 'message_read', type: 'int'},\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\/\/the id from db of the message\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0{name: 'message_id', type: 'int', defaultValue: 0}\r\n        ]\r\n    }\r\n});\r\n<\/pre>\n
Here we define the Message model, every message following to be a instance of this class. We define the message_content<\/strong> field, which will represent the actual message, the sent<\/strong> boolean, that will be true if the message was sent from<\/em> this device, or false if it was received on<\/em> this device. The message_with<\/strong> represents the id of the other user that received or sent the message, message_time<\/strong> is the timestamp of the message. The last are: the message_read<\/strong>, which will be 0<\/em> if the message is not read or 1<\/em> if the message is read, and message_id<\/strong> that represents the id of the message from the database.<\/p>\n
For this model, we will also create a store<\/a>, where we can have a collection of Message objects. We will name the store Messages, and the definition will look like this:<\/p>\n
\r\nExt.define('App.store.Messages', {\r\n    extend: 'Ext.data.Store',\r\n\r\n    config: {\r\n        model: 'App.model.Message'\r\n    }\r\n\r\n});\r\n<\/pre>\n
Now, we must add Node.js<\/strong> functionality to our app. First, we include the js file from our server in the HTML header:<\/p>\n
\r\n<head>\r\n    <title>Chat<\/title>\r\n    <link rel="stylesheet" type="text\/css" href="css\/app.css" \/>\r\n\r\n    <script type="text\/javascript" charset="utf-8" src="js\/lib\/sencha-touch-all.js"><\/script>\r\n    <script src="http:\/\/<IP>:<PORT>\/socket.io\/lib\/socket.io.js"><\/script>\r\n    <script src="js\/app.js"><\/script>\r\n<\/head>\r\n<\/pre>\n
After that, we try to create the socket object:<\/p>\n
\r\nif ("undefined" == typeof(io)) {\r\n    alert("Server not available at this moment. Please retry later");\r\n} else {\r\n    var socket = io.connect('<IP>:<PORT>');\r\n}\r\n<\/pre>\n
We will create a register and login screen, so users can sign up an then authenticate in the application. After login, we will save user id and user name in local storage<\/strong>, so we can auto login user next time he uses the application. However, this is not a safe procedure and it’s not recommended to use it in production.
\nAfter login, we will display a screen with the online users. This is a List view<\/a>, that loads its data from OnlineUsers<\/strong> store created earlier. The controller of this view listens to list refresh, list add and list remove events, so we can keep it up to date in real time. Also, when a new message is received but the user did not see it, the list will update the senders item with the number of unread messages from that user.<\/p>\n
Tapping on a user from this list, will open the conversation view. Here we can see the messages from this user, send a new message, or scroll up to load older messages. The display of the messages is also a list that loads the data form Messages store. This list looks like this:<\/p>\n
\r\n\/\/messages list\r\n{\r\n    xtype: 'list',\r\n    disableSelection: true,\r\n    store: 'Messages',\r\n    itemId: 'messageList',\r\n    layout: 'fit',\r\n    cls: 'messageList',\r\n    itemTpl: new Ext.XTemplate(\r\n        '<tpl if="sent">',\r\n            '<div class="x-button x-button-confirm sent message-container" style="float: right;">',\r\n                '<p class="x-button-label message">{message_content}<\/p>',\r\n            '<\/div>',\r\n        '<tpl else>',\r\n            '<div class="x-button received message-container" style="float: left;">',\r\n                '<p class="x-button-label message">{message_content}<\/p>',\r\n            '<\/div>',\r\n        '<\/tpl>'\r\n    )\r\n}\r\n<\/pre>\n
In order to load older messages, we must attach a handler for the scroll event of the scroller of list. If it reaches a specified value for Y coordinate, it’s time to load more older messages.<\/p>\n
\r\nvar listItem = view.query('#messageList')[0];\r\n\/\/handler for list scroll\r\nlistItem.getScrollable()._scroller.on('scroll', function() {\r\n        \/\/if the scroll reaches a point and there was not another request made\r\n        if (-30 >= arguments[2] && !that.loadMoreRequest) {\r\n        \/\/request more messages\r\n        that.loadMoreRequest = true;\r\n        socket.emit('get_conv_messages', that.selectedUser, store.getCount(), 10);\r\n    }\r\n});\r\n<\/pre>\n
On first line, we get the list element. After that we get the scroller object, and we attach a handler for it’s scroll event. If the Y coordinate get’s lower than -30, and a load more request was not already made, we mark the load more request flag as true, and we make the request to get the next 10 elements. The server will respond to this request with the messages, and trigger the get_conv_message_resp<\/strong> event. In the init<\/strong> function of the Chat controller, we attach a handler for this event. In this handler we will parse the JSON<\/strong> received and after that, one by one, we will insert the messages at the beginning of the store, so the older one is always the first. Finally, with a delay of 1 second, we will set as false the load more request flag, so we can make another request if the user wants.<\/p>\n
Finally, the file structure of our client application should look like this:<\/p>\n
\"client<\/a><\/p>\n
Now you are one step away from your mobile chat app<\/strong>. Last thing you need to do is to make iOS<\/strong> and Android<\/strong> builds in order to see it at work. You can download the full archive<\/a> and give it a try.<\/p>\n
I am looking forward for your feedback, let me know if you have any suggestions or questions.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
In this article we will implement a chat application for mobile devices that will work on both Android and iOS. In order to do so, we will need\u00a0knowledge of Sencha Touch for the mobile application, Node.js for server-side and MySQL for the database. We can use this kind of application to communicate with other people …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[88],"tags":[128,89],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1186"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=1186"}],"version-history":[{"count":75,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1186\/revisions"}],"predecessor-version":[{"id":1277,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1186\/revisions\/1277"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=1186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=1186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=1186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}