How to send css/javascirpt files along with HTML using python's socketio?

Question

I have a python socket server that is always offline, that I need to serve an HTML page to a local client, and communicate back and forth. However, when running it offline, it wasn't able to get the remote javascript/css we were using, which is fine, we just downloaded the files and required licenses, and had the html refer to them locally.

This approach worked when just running the .html file, but when the .html file is served up by the socket server, it lacks the javascript and html that the .html is referring to.

We are sending the .html file to the client like so:

sio = socketio.AsyncServer(cors_allowed_origins='*')
app = web.Application()
sio.attach(app)

async def index(request):
    with open('./index.html') as f:
        return web.Response(text=f.read(), content_type='text/html'


app.router.add_get('/', index)

if __name == '__main__':
    web.run_app(app)

We are assuming that, because the server is only sending the .html file, we are not seeing the local js/css being loaded correctly. We would like to know if there is a way to send these files along with the .html file so we can have the page display correctly.

score 0 · Answer 1 · answered May 06 '20 at 21:43

I did not use the socketio, but this may help you.

I achieved it as follows for my Python Server:

        client, address = sock.accept()
        print('[CONNECTED] Client Connected:', address)
        req = client.recv(1024).decode('utf8')
        req = req.split(' ')[:2]
        print('[CONNECTED] New request', req[-1])
        client.send(b"HTTP/1.1 200 OK\n")
        try:
            if req[-1] == '/':
                client.send(b'Content-Type: text/html\n\n')
                client.sendfile(open('./static/html/home/index.html', 'rb'))
                # client.sendfile(open('./static/js/index.js', 'rb'))
            else:
                if '.js' in req[-1]:
                    client.send(b'Content-Type: text/javascript\n\n')
                elif '.css' in req[-1]:
                    client.send(b'Content-Type: text/css\n\n')
                else:
                    client.send(b'None')
                client.sendfile(open('.' + req[-1], 'rb'))

Simply mention the JS and/or CSS files in the html as

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="http://localhost:1573/static/css/styles.css" />
  </head>

  <body>
    Hello World!
    <script src="http://localhost:1573/static/js/index.js"></script>
  </body>
</html>

Project DIR:

./
    server.py
    static/
        html/
            index.html
        css/
            styles.css
        js/
            index.js

So Basically I'm making HTML mention the scripts as part of the local server localhost files, that makes it send requests for those files too. There in the server I check if the request for JS or CSS and send it accordingly. Note that the "Content-Type" plays an important role here. To send JS as JS and CSS as CSS and not plain text.

How to send css/javascirpt files along with HTML using python's socketio?

1 Answers1