Giter VIP home page Giter VIP logo

hitch's Introduction

Hitch

Hitch is a Websocket service framework that simplifies the process of aligning backend with frontend development. Quickly create multi-service (HTTP/WS) web applications with real-time communication to backend IO. Create custom handlers and callbacks to create seamless apps in a fraction of time compared to other framework workflows.

Both Hitch's Python backend objects and it's Javascript object are totally asynchronous and support message/response handling in real-time.

Developers tend to have a hard time synchronizing message responses using vanilla websocket libraries due to the lack of built-in IO accountability, Hitch handles all of this for you.

Hitch is still in it's early stages and is recommended for Development Only.

I would absolutely accept help with open arms so feel free to reach out to me on Twitter if you are interested in contributing/collaborating!

Setup (Development)

Create A Project Directory

$ mkdir /home/myHitchProject $ cd /home/myHitchProject

! Then extract the contents of hitch-master/src to our project directory. !

Create A Virtual Environment (Recommended)

$ python -m venv myHitchProjectVenv $ .\myHitchProjectVenv\Scripts\activate

Install Requirements

$ pip install requirements.txt

Example: "Hello World"

Showing:

Static HTTP server implementation

Service-wide logging

Websocket server implementation

HitchManager Implementation

Python (Server/s)

from hitch import Hitch, HitchUtils, HitchHttpServer, HitchManager
from logging import basicConfig, DEBUG


# Start an HTTP server to serve our document.
# This document will create the socket connection if we so choose. 
httpServer = HitchHttpServer(content=open('example.html', "r").read())


# Initialize debug logging
basicConfig(filename="hitch.log", level=DEBUG)


# Example Socket Handler
async def hello(porting):

    # Unloading handler params (self.message, self.client, self.socket)
    params = HitchUtils.params(porting)

    # Some basic server-side Validation
    # If we `return` then the message is effectively dropped.
    if 'name' not in params.message: return
    if type('name') != str: return

    # Create our response
    response = {
        "message": f"Hello, {params.message['name']}!"
    }

    # Create an automatic response to the client.
    # Due to the fact that the message is ONLY going back to this client we can safely pass the client/messageID back to the client, if need be.
    # This utility essentially updates our response with required information to fullfil a client's callback. This is how the Javascript client knows when/how to handle a response from the server. 
    responseString = HitchUtils.createPrivateResponse(params.message, response=response)

    # Send the message to the client
    await params.socket.send(responseString)


# Create the Hitch instance
# Server adapter defaults to 127.0.0.1
hitch = Hitch(port=8441)

# Add our handler that we defined above
hitch.addHandler("hello", hello)

# Start Hitch
hitch.start()


#### Hitch Manager ####

# Create/start a HitchManager instance 
# HitchManager defaults to port 4444 and can be accessed directly from the file titled "manager.html".
manager = HitchManager("admin", "password123")
manager.start()
Output:
Started New Thread. Starting HTTP/S Server @ http://127.0.0.1:80...
Started New Thread. Starting Websocket Server @ ws/s://127.0.0.1:8441...
Started New Thread. HitchManager is live @ C:\Users\User\Desktop\myHitchProject\manager.html...
Started New Thread. Starting Websocket Server @ ws/s://127.0.0.1:4444...

HTML/Javascript (Client)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hitch Hello Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/hitch.js"></script>
    </head>
    <body>

            <label for="name">Enter Your Name</label>
            <input type="text" id="name">
            <button id="sub">Submit</button> 
        
        <script>
            // Initialize our HitchClient instance
            let hitchClient = new HitchClient("ws://" + location.hostname + ":8441/");
            // Our onClick handler
            document.getElementById("sub").onclick = () => {
                // Get the clients input (name)
                let usersName = document.getElementById("name").value;
                if (usersName.length > 1){
                    // Send our message to the server,
                    hitchClient.send( "hello", data={
                    name: usersName
                    // Designate a callback to handle the response message from the server, when the time comes.
                    }, callback = (data) => {
                        // We should see an alert containing our response message from the server.
                        alert(data.message)
                    })
                }
            };
        </script>

    </body>
</html>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.