0

I am new to client/server side programming, and I really would appriciate help on a problem that I have been stuck on for couple weeks.

I do not know how to send a word from a webpage form to a server, such that the server can send it to another computer.

I have tried setting up a flask framework to acquire the value of the user input. Then, I tried to run tcp client code in the same flask app to send it to my tcp server. It is not working, and I am wondering if that's a correct usage of flask, as I also do not have experience using flask.

Here is my flask app code:

#client_app.py
#from the Flask class insert the flask library
from flask import Flask, render_template, request
import socket
import sys

#this is a route
@app.route('/send', methods=['POST'])
def send():
    puzzle_word = request.form['word']
    # Create a TCP/IP socket
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    # Connect the socket to the port where the server is listening
    server_address = ('localhost', 10000)
    print('connecting to {} port {}'.format(*server_address))
    sock.connect(server_address)
    try:

        # Send data
        message = b'Salam Alaikum.'
        print('sending {!r}'.format(message))
        sock.sendall(message)

        # Look for the response
        amount_received = 0
        amount_expected = len(message)

        while amount_received < amount_expected:
            data = sock.recv(1024)
            amount_received += len(data)
            print('received {!r}'.format(data))

    finally:
        print('closing socket')
        sock.close()

Here is my tcp server

#socket_echo_server.py

import socket
import sys

# Create a TCP/IP socket
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

# Bind the socket to the port
server_address = ('localhost', 10000)
print('starting up on {} port {}'.format(*server_address))
sock.bind(server_address)

# Listen for incoming connections
sock.listen(1)

while True:
    # Wait for a connection
    print('waiting for a connection')
    connection, client_address = sock.accept()
    try:
        print('connection from', client_address)

        # Receive the data in small chunks and retransmit it
        while True:
            data = connection.recv(1024)
            print('received {!r}'.format(data))
            if data:
                print('sending data back to the client')
                connection.sendall(data)
            else:
                print('no data from', client_address)
                break

    finally:
        # Clean up the connection
        connection.close()

Here is the core part of my web form

<form  id="main" method="POST" onsubmit="app_client.py" >
    <h2 class="sr-only">Login Form</h2>
    <div class="two-colored-border">Game Rules: <ol> <li> A word must be 2-4 letters </li> <li> A word contains only Alphabets  </li> <li> Letters can be lower case, upper case, or a combination of both </li> </ol> </div>
    <div id="myForm" class="form-group">
      <label for="word">Please select a word:</label>
      <input name="word" id="userInput" class="form-control" type="text"  required minlength="2" maxlength="5" onkeyup="lettersOnly(this)" >
      <button  id="sendbutton" class="btn btn-primary btn-block" type="submit">Submit</button>
    </div>
</form>

Essentially, I do not know how to send a string from a webpage to another computer.

I am sorry that the question is lengthy, I tried to provide as much applicable details, and I appriciate any help!

Farah
  • 5
  • 2
  • I used the tcp server and client from a person online, i would like to reference them here: https://pymotw.com/3/socket/tcp.html – Farah Mar 14 '19 at 22:22
  • No it won't. Flask is not serving the web page. Ignore my last comment. – roganjosh Mar 14 '19 at 22:27
  • thanks for trying to help – Farah Mar 14 '19 at 22:28
  • My gut still tells me that `onsubmit="app_client.py"` is something from PHP, without even knowing PHP. I don't get how the file path is resolved. If Flask isn't serving the web page then there seems a massive disconnect between all the parts of this app. – roganjosh Mar 14 '19 at 22:30

2 Answers2

0

<form id="main" method="POST" onsubmit="app_client.py" >

You're trying to point the form at your code, but onsubmit is for running script in the browser. What you want is for the form to send a POST message to your server and you use the action attribute for that.

Documentation on the action attribute

@app.route('/send', methods=['POST']) defines the endpoint the server is listening at. You need the action to tell the form it needs to submit there.

Ld00d
  • 41
  • 7
  • thanks man this helped me figure out what to do . Here is what I did: I removed the onsubmit="app_client.py" and added action="http:127.0.0.1:5007" this sends the HTPP request to my server which has the word in the body of the HTTP request. I do not think I will need flask, this is pretty much it. Thank you :) – Farah Mar 14 '19 at 22:50
0

To send the form value over to the server, use action="http:127.0.0.1:5007" as follow:

<form  action="http:127.0.0.1:5007" method="post" id="main" >

Of course, you could also use any ip address and port. The server will recieve something like this:

message from the client to ther server

Later, you can write server program to clean up the http request and get the particular value inside the http request body, in my case it is the value of the word input

Farah
  • 5
  • 2