Lecture 12.1 (Tuesday, April 12)

• Quiz on Thursday
• File Upload and JS things

File Upload

We've so far handled basic inputs, such as text fields.

Some of you have discovered text areas and select boxes.

Let's upload files!

File uploads are handled a bit differently.

A few pieces:

• Mark the form as being enctype=multipart/form-data
• Include a file input
  • Optionally: list the accepted file types in accept attribute
• Get the data from request.files and save it. We can read the file from the stream attribute.

We'll save data in a BLOB in the database.

Add the ability to post graphical Hais.

Drag & Drop File Upload

Use Dropzone.

Real-Time Communication

How can the server talk to the client?

We will use Socket.io.

This abstracts websocket communication, along with a fallback to plain HTTP, to allow the client-side JavaScript to receive new events from the server.

Websockets are a way to create bidirectional sockets between the client and server, to send messages between JavaScript code and the web server.

They're like TCP/IP sockets, except they run over HTTP.

Unfortunately, Flask has poor support for them.

Socket Model

In Socket.io, the client connects to the server, and they then exchange messages delivered via events.

So, from the client, you can send a message to the server (with send or emit), and it will show up as an event.

From the server, you can send a message to one or more clients, and it'll show up as an event.

SocketIO defines a few event types:

message

Contains a string message

json

Contains a JSON object

connect

Received on the server when a new client connects

disconnect

Received on the server when a client disconnects

user-defined

Define your own event type, and attach JSON data (like we do in Hai)

Implementing a Chatbot

Let's look at a quick chatbot.

This is based on the Socket.io Chat example and NLTK's Eliza.

Core ideas:

• In both client and server, we respond to message events
• In server, we send to reply to the message sent by the client.

Using Rooms

Now, we want to use it for another thing: making Hais show up in real time.

Problem: how do we send to the user receiving the Hai?

If they have multiple tabs open?

Solution: Socket.io rooms.

Individual connections can subscribe to rooms to get notified of things.

We will make a room for each user, to notify them of the received messages.

Join a room with join_room on the server. We'll do this in response to a connect event.

Then we can broadcast a message to the room!

And respond in the client!

And add a Hai!

Deploying

We can do it with WSGI. Performance kinda stinks, but it works.

The Python eventlet package provides additional support.

If you want the high-performance version, but still behind Apache, consider mod_proxy.

Quiz 4

Quiz 4 on Thursday

• Past topics, particularly CSS and selectors
• What's going on with asynchronous programming? AJAX?
  • what is asynchronous programming?
  • how do you do it? how do you receive the result of an AJAX call?
• How do you modify HTML?
  • change attributes
  • append/prepend HTML
• What does client-side templating do?
• Data modeling
  • Foreign keys
  • Many-to-many joins with auxiliary tables