Building a Chat App: JavaScript Front-End and Python Back-End Communication, Lecture notes of Computer science

Download Building a Chat App: JavaScript Front-End and Python Back-End Communication and more Lecture notes Computer science in PDF only on Docsity!

CSE 115

Introduction to Computer Science I

Road map

▶︎ Review

JSON

Chat App - Part 1

AJAX

Chat App - Part 2

Web Server

Web Server

Software runs

continuously and waits

for requests from

clients

Responds to requests

Client

Sends requests

to server

Client

Sends requests

to server

Client

Sends requests

to server

Python Web Server

import bottle

@bottle.route("/")

def any_name():

return bottle.static_file("index.html", root="")

@bottle.route("/myCode.js")

def any_name():

return bottle.static_file("myCode.js", root="")

bottle.run(host="0.0.0.0", port=8080, debug=True)

Road map

Review

▶︎ JSON

Chat App - Part 1

AJAX

Chat App - Part 2

JSON

JSON.stringify(jsData) JSON.parse(jsonString) import json json.dumps(python_data) json.loads(json_string) We've seen json.loads to convert from a JSON string to python type To complete the conversions we have

• json.dumps to convert Python types to JSON strings

• JSON.stringify to convert JavaScript types to a JSON string

• JSON.parse to convert a JSON string to JavaScript type

Whenever we send data over the Internet we'll covert it to a JSON string

Chat App - Overview

Goal: Build an app where users can send chat messages to all other users To build this app we will need

• An HTML file that will be displayed to the user

• (JavaScript) A function that will modify the HTML to display the

chat history to the user

• (JavaScript) A function that will allow the user to submit a new

chat message

• (Python) A server that will host our HTML, JavaScript, and chat

messages

• (Python) Function to save and load the chat history in a file that

will persist ever if the server restarts

• A way for the JavaScript front-end to communicate with the

Python back-end

Chat App - Overview

Note: There are many possible ways to build this app We'll walk through only one possible design, though there are many other solutions

Chat App - index.html

Message:
Send

Chat App - index.html

---

Message:
Send

Download the JavaScript portion of the app

Chat App - index.html

****
Message:
Send

Add an empty div where our JavaScript can write the chat history

Chat App - index.html

Message:
Send

Add 2 new HTML elements

• An input with a type of text gives the user a text box

• A button that calls one of our JavaScript functions whenever the user

clicks it

Chat App - chat.txt

This file will store all of the chat history We won't add anything to this file manually, but we'll manually create it as an empty file This file will store one chat message per line

Chat App - chat.py

filename = "chat.txt"

def get_chat():

full_chat = []

with open(filename) as file:

for line in file:

full_chat.append({"message": line.rstrip("\n\r")})

return full_chat

def add_message(message):

with open(filename, "a") as file:

file.write(message + "\n")