ICEspresso Chat - Getting Started

Home

Demo

1. Hello 2. Chatroom 3. MapChat 4. MapGame 5. Friends' Status

Download

Documentation

Getting Started API Reference Tutorial FAQ How to - MapGame How to - Friends' Status

Community

Forum Blog Get Involved

Credit

ICEspresso Chat Framework

ICEspresso Connection Pool

Docs > Getting Started

Getting Started with ICEspresso Chat - Hello ICEspresso

Welcome, web developer!

This document will give you the concepts of how to program with ICEspresso Chat Framework. Follow these getting started steps, you can build a simple web application allows multiple users to chat.

Let's start to roast.

Table of Contents

Audience
Requirements
Prepare the Sample HTML File
1. 1. Get sample code - hello.html
2. 2. Set the account information to hello.html
Hello, ICEspresso
What's Next

Audience

Straightforwardly, the ICEspresso Chat is a framework designed for Javascript developers with object-oriented programming concepts.

goTop

Requirements

1. Web Server

Local or remote, you will need a web folder to host the related files.

2. Account of ICEspresso Chat Connection Pool

Before process the following steps, you must get a free ICEspresso Chat connection pool account. The connection pool is sponsored by Push4Free.com, a free push platform hosting. The free account includes 30 concurrent connections, means the web application you run with the account allows 30 concurrent users.

>>> get a free ICEspresso Chat Connection Pool account

The two essential information of the account are:

UserID
Password

If more than 30 concurrent connections is required, you may apply the Premier program in Push4Free.com.

3. ICEspresso Chat Package

>>> Download ICEspresso Chat Framework Package

Extract the package and place all files to any web folder, say /icespresso of local web server, so you can access it with URL http://localhost/icespresso.

goTop

Prepare the Sample HTML File

1. Get sample code - hello.html

You may copy-and-paste the following codes and save it as file named hello.html.

Or, for your convenience, you may download it directly from here:

>>> Download hello.html (right-click then save as)

hello.html source codes :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hello ICEspresso</title>
<script src="swfobject.js" type="text/javascript" language="javascript"></script>
<script src="json2.js" type="text/javascript" language="javascript"></script>
<script src="icespressochat.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">

function _DEBUG(msg) {
    var d = document.createElement("DIV");
    d.innerHTML = msg;
    document.body.appendChild(d);
}

function setMyNickname () {
    var nick = document.getElementById("nickname").value;
    if (nick.length != 0) {
        chat.iAm(nick);
        _DEBUG(++i + ". Set my nickname to  <font color=blue>" +  
        chat.getMe().getHandle() + "</font>.");
        chat.joinRoom(roomName);
        _DEBUG(++i + ". <font color=blue>" + chat.getMe().getHandle() + 
        "</font> automatically joined room <font color=firebrick>" + 
        roomName + "</font>.");
        _DEBUG(++i + ". Start to say something.");
    }
}

function sendMsg () {
    var msg = document.getElementById("message").value;
    if (msg.length != 0) {
        chat.send2Room(msg, roomName);
        _DEBUG(++i + ". " + chat.getMe().getHandle() + 
        " said <font color=red>'" + msg + "'</font>" + 
        " in room <font color=firebrick>" + roomName + "</font>.");
        document.getElementById("message").value = "";
    }
}

icespresso.onChatEvent = function(chat, eventId, arg) {
    switch (eventId) {
        case chat.CHAT_ROOMMSG: {
            _DEBUG(++i + ". Received <font color=red>'" +  
            arg.msg.getMessage() + "'</font> from <font color=blue>" + 
            arg.msg.getBy() + "</font> in room <font color=firebrick>" + 
            roomName + "</font>.");
            break;
        }

        default: {
            break;
        }
    }
};

icespresso.onSystemEvent = function(chat, eventId, arg) {
    switch (eventId) {
        case chat.SYS_INITIALIZED: {
            _DEBUG(++i + ". ICEspresso initialized.");
            chat.connect(prop);
            break;
        }

        case chat.SYS_CONNECTED: {
            _DEBUG(++i + ". iPush Server connected.");            
            break;
        }

        case chat.SYS_HANDSHAKED: {
            _DEBUG(++i + ". Handshaked with ICEspresso Service.");
            _DEBUG(++i + ". Please set your nickname.");
            break;
        }

        default: {
            break;
        }
    }
}

var prop = {
    host: "www.push4free.com",
    port: 443,
    group: "icespresso",
    product: "chat",
    user: "YOUR_USERID",
    password: "YOUR_PASSWORD"
};

var i = 0;
var roomName = "myroom";
var chat = icespresso.initialize();
</script>
</head>

<body>
<p>Set my nickname to: <input type="text" name="nickname" id="nickname">&nbsp;
<button onclick="setMyNickname()">set my nickname</button></p>
<p>Say something: <input type="text" name="message" id="message">&nbsp;
<button onclick="sendMsg()">send</button></p>
</body>
</html>

2. Set the account information in hello.html

Open the hello.html in your text editor or html authoring tool. Find words "user" and "password" (check the codes in red above), set the respective values to your account.

Save it and put a copy to the web folder where ICEspresso Chat files placed.

That's it.

Let's have a chat to say hello.

goTop

Hello, ICEspresso

A live version of this hello ICEspresso is ready for you, check our live demo.

1. Open two browser windows and access hello.html

As figures 1. shown, we take http://localhost/icespresso/demos/hello.html for example URL here:

(Figure 1. open hello.html in browser A)

(Figure 2. open hello.html in browser B)

If everything goes smoothly, you will see the same 4 lines status report in both browser A and B, as Figure 1. and 2. shown:

1. ICEspresso initialized. //means one ICEspresso object has been initialized successfully
2. iPush Server connected. //gets connected to iPush Server provided by Push4Free.com
3. Handshaked with ICEspresso Service. //gets connected to ICEspresso service
4. Please set your nickname. //give a nickname for joining the default chatroom

If your result is different, please check previous steps you made to correct the possible mistake.

2. Give different nicknames in two browser windows

Set nicknames to john and mary in browser A and B respectively, as Figure 3. and 4. shown:

(Figure 3. set nickname to john in browser A)

(Figure 4. set nickname to mary in browser B)

After press button [set my nickname], you should see the similar 3 lines status report in both browser A and B:

5. Set my nickname to john/mary. //nickname set successfully
6. john/mary automatically joined room named myroom. //joins chatroom myroom successfully
7. Start to say something. //ready to chat

We make the user join chatroom "myroom" automatically right after his/her nickname set.

If your result is different, please check previous steps you made to correct the possible mistake.

3. John, say something, like "hello"

In browser window A, set focus on Say something text input control, type "hello", then press button [send], as Figure 5. shown:

(Figure 5. say "hello" in browser A)

Check the result of two browser windows:

(Figure 6. result of browser A after john said "hello")

In browser window A, you may see the status report as Figure 6.:

8. john said 'hello' in room myroom. //john said "hello" in myroom
9. Received 'hello' from john in room myroom. //john also received "hello"

(Figure 7. mary received "hello" in browser B)

In browser window B, you may see the status report as Figure 7.:

8. Received 'hello' from john in room myroom. //mary received "hello" from john

If your result is different, please check previous steps you made to correct the possible mistake.

4. Mary, say something, like "hello john"

In browser window B, set focus on the Say something text input control, type "hello john", then press button [send], as Figure 8. shown:

(Figure 8. say "hello john" in browser B)

Check the result of two browser windows:

(Figure 9. result of browser B after mary said "hello john")

In browser window B, you may see the status report as Figure 9.:

9. mary said 'hello john' in room myroom. //mary said "hello john" in myroom
10. Received 'hello john' from mary in room myroom. //mary also received "hello john"

(Figure 10. john received "hello john" in browser B)

In browser window A, you may see the status report as Figure 10.:

10. Received 'hello john' from mary in room myroom. //john received "hello john" from mary

Here we complete this getting started - hello ICEspresso.

If your result is different, please check previous steps you made to correct the possible mistake.

goTop

What's Next

Some functions need to be added for building a more complete web chatting application. Such as:

Joining Chatroom / On Joining Chatroom
Quitting Chatroom / On Quitting Chatroom
Changing Nickname / On Changing Nickname
Set Debug / Log Pane
Friend List
Friend Status
Private Message

You may learn more in the Tutorial page.

goTop

Developer Guide

Demo Codes

Support Resources

Latest Blog Posts

Getting Started with ICEspresso Chat - Hello ICEspresso