Wifi Chat -DIY

All the devices connected to the same WiFi network can chat which each other.This method doesn't required any internet connection.

Please vote me for "Coded creation contest" .

Difficulty level :2.5/5

1. Android Adt bundle( SDK+Ecllipse )

• linux 64 bit: http://dl.google.com/android/adt/adt-bundle-linux...
• linux 32 bit: http://dl.google.com/android/adt/adt-bundle-linux...
• MacOS X: http://dl.google.com/android/adt/adt-bundle-linux...
• Win32: http://dl.google.com/android/adt/adt-bundle-linux...
• Win64: http://dl.google.com/android/adt/adt-bundle-linux...

2. Java development kit

Download the suitable JDK for your operating system - link

3.Apache Tomcat

Tomcat v7

(download the suitable version based on your operating system)

if u have already installed Abt bundle skip to next step,

Download and extract the the abt zip file and install the jdk .

Open the eclipse (abt-bundle-XXX/eclipse/eclipse) ,if your able to open it with out any warning/error skip to next step

if you got any java path related errors

go to mycomputer>properties>advanced system settings> advanced tab> environment variables tab

in system variables click edit then give

variable name :Java Home

variable value :location of java development kit

(According to Wikipedia)

J2EE:

J2EE is a platform-independent, Java-centric
environment from Sun for developing, building and deploying Web-based enterprise applications online. The J2EE platform consists of a set of services, APIs, and protocols that provide the functionality for developing multitiered, Web-based applications.

Tomcat:

Apache Tomcat is an open-source web server and servlet container developed by the Apache Software Foundation (ASF). Tomcat implements several Java EE specifications including Java Servlet, JavaServer Pages (JSP), Java EL, and WebSocket, and provides a "pure Java" HTTP web server environment for Java code to run in.

Instructions : (follow the images for better understanding)

1. Adding J2EE to eclipse

open the eclipse and click Help > Install New Software >click dropdown in "workwith" tab

and add "Juno – http://download.eclipse.org/releases/juno"

Expand Web, XML, Java EE and OSGi Enterprise Development and

select below extensions then proceed with installation and restart the eclipse.

• Eclipse Java EE Developer Tools

• JST Server Adapters

• JST Server Adapters Extensions

2 . Adding Tomcat server to eclipse

Goto Windows >show views>others>servers>server

(server tab will appears at the bottom)

click newserver wizard in the server tab then

select Apache >Tomcat v7.0 server (leave server host name and server name as default ) and click next

set the Tomcat extracted file location in the tomcat installation directory and finish the installation

Create a testing web project

Goto: File >New >Others >New Dynamic Web Project >(Ensure ApacheTomcat v7.0 is in target runtime)>Next>Next>finish

now,expand the testing >WebContent

Right click on Webcotent New>HTML FIle >name it as index.html

Edit the Title and body in the HTML file (refer the images)

Run the server as local host:

Right click on project (Testing) >Run as> Run on Server >Manually define server >choose tomcat v7>

Server's host name: localhost

Server name: Tomcat v7.0 Server

Server run time environment :Apache tomcat v7.0

then finish

press play button (near the url) you can see the html site in eclipse

(http://localhost:8080/testing/)

Run the server with IP address:

Find your IP address:

Windows:command prompt>ipconfig

Mac:terminal>ifconfig

instructions:

Right click on project (Testing) >Run as> Run on Server >Manually define server >choose tomcat v7>

Server's host name:Your IP address(172.16.34.226 in my case )

(http://172.16.34.226:8080/testing/)

File>New>Other>Web>Dynamic web project (name the project as "Wifi Chat")

Expand the Wifichat>JavaResources >src>New>Package (name it as "info.WifiChat")

Download the supported libraries:

• google-collections-0.8.jar

• javaee-api-7.0.jar

• json-org.jar

Paste these three libraries in WebContent>WEB-INF>lib

Create a new class named JSONUtils.java under project’s src package folder. This class contains methods to generate JSON strings those are required to have the communication b/w socket server and clients.

Copy the SocketServer.java class file under the project's src package folder.this class contains four call functions

onOpen() – This method is called when a new socket client connects.

onMessage() – This method is called when a new message received from the client.

onClose() – This method is called when a socket client disconnected from the server.

sendMessageToAll() – This method is used to broadcast a message to all socket clients.

Note:

Save the index.txt as index.html

Add style.css under WebContent folder ,this contains css style for web User Interface.

Add main.js under Webcontent folder This file contains all the methods required to handle communication between socket server and client. The other things like parsing JSON, appending messages to chat list also taken care in the same file.

in main.js file:

var socket_url = '172.16.34.226'; //replace this with your IP address

Add jquery-1.11.1.min and index.html under Webcontent folder.

Run the server :

WifiChat>Run as>Run on server>

Servers host name:172.16.34.226

URL: http://172.16.34.226:8080/WifiChat/

you can see the json script in the console window

Feel free to modify the code and comment below if u have any problems

If u like this project,please vote me for "Coded creation contest" .