Babel Chat is a video chat web app that allows language learners to connect with native speakers of their target language and engage in guided, interactive chat sessions.

Providing an internationally convenient, entirely browser-hosted video language exchange, Babel Chat users can play games that cater to various learning styles while strengthening vocabulary, grammar, and communication skills. Users may also choose to discuss common themes by responding to questions in the chatbox, all in real time.

Babel Chat is built in Python with a Flask framework, uses a SQLite database, and integrates the FlaskSocketio and OpenTok APIs for websocket functionality.

Profile page:

Videochat Room:

1. First, clone this directory to your computer.

$ git clone https://github.com/amitch23/Babel_Chat.git

2. Create and activate a virtual environment in the same directory:

$ pip install virtualenv
$ virtualenv env
$ . env/bin/activate 

3. Install the required packages using pip:

(env)$ pip install -r requirements.txt

4. The OpenTok API requires api_key and api_secret variables. Go to 'https://tokbox.com/' and sign up to get your keys and set them in your BASH profile:

export API_KEY="your_API_key"
export API_SECRET="your_API_secret"

4. In Chrome or Firefox, open 2 browser windows - one in 'normal' mode and another in incognito or private mode:

http://localhost:5000/

Create new profiles and enter the chat room!

• babel.py: runs the program, and contains all of the Flask app routes and socket handlers.

• model.py: creates the database and classes.

• babelchat.db: database that stores user, language, and game information

• Templates directory: html templates that implement Jinja to render pages in the browser, as well as sockets.js, which creates and handles websocket connectivity with the server for multiple-client functionality.

• Static directory:

  • Images: html visual elements, including the logo, background, icons, and game content.
  • Jquery and Bootstrap libraries with custom CSS stylesheets.

Once a user enters the waiting room or starts a game, the web sockets are connected for both clients. Instead of standard http requests, web sockets open a bidirectional, real time channel in which the server 'listens' to emissions from the connected clients and vice versa.

For two users to join a room and start a game, 15 separate interactions between the clients and server are called.

The diagram below demonstrates how the server and clients are emitting and receiving data. Each arrow represents a function that sends a python dictionary (or javascript object) to either the client or server.