WebSocket-Chat-Client

A chat client using the WebSocket protocol.

This is a multi-user chat client that implements The WebSocket Protocol. It makes use of HTML5, CSS and the JavaScript library jQuery.

The following compatible chat server implementations do currently exist:

• FlorianWolters/PHP-WebSocket-Chat-Server: A WebSocket chat server implemented with the PHP library Ratchet.
• SteffenSchuette/WebSocket-Chat-Server for an example WebSocket chat server implemented with the C# library Fleck.

Features

• The user can enter a username to use in the chat.
• The user can connect and disconnect the client via two buttons.
• Outputs status messages, warnings and errors in the chatlog.
• Chat messages can be send via the return key on the keyboard or a button.
• A chat message (and the output) consists of the the username, the datetime and the text of the message.
• Application Programming Interface (API) documentation with JSDoc.
• Valid HTML5.
• Valid CSS.

Installation/Usage

1. [optional] Start a WebSocket chat server which implements the defined chat protocol (see below).
2. [optional] Edit the connection options in the configuration file /config.json to point to the desired WebSocket chat server.
3. Serve the project directory with a webserver, e.g. Apache HTTP Server or Internet Information Services (IIS).
4. Open the address of the previously configured webserver in a web browser.

Notice: The project contains a web.config file to use with IIS. That file associates the .json file extension with the MIME type application/json.

Used Technologies

• jQuery v1.7.2
• HTML5
• CSS
• normalize.css

Chat Protocol

All you need to know to implement your own WebSocket chat server is the following:

• The client expects chat messages in the following JavaScript Object Notation (JSON) format:

  {
      "ts" : "2012-07-05 00:00:00",
      "uid": "Florian Wolters",
      "msg": "hello, world"
  }

• The chat server expects a single string as the message from the chat client. In the example above, the chat message sent to the chat server has been hello, world.

• The client sends the username after a connection has been established (on the onopen event). In the example above, the first chat message sent to the chat server has been Florian Wolters.

• After the processing of the message from the chat client one has to send a multicast (or broadcast) message to all connected chat clients (including the one that has send the message).

Roadmap/TODO

• Improve documentation.
• Refactoring of the JavaScript source code (assets/js/chat-client.js): Use object-oriented programming (OOP).
• Correct JSDoc documentation (currently only the file comments appear within the HTML output of jsdoc-toolkit).

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along with this program. If not, see http://gnu.org/licenses/lgpl.txt.