html - Real time Chat Application With Python and SocketIO -
i building real-time chat application using python , socketio. following python back-end code :
from flask import flask, render_template flask_socketio import socketio, emit app = flask(__name__) app.config[ 'secret_key' ] = 'sjkdajwdiajldjalj62768' socketio = socketio( app ) @app.route( '/' ) def index(): return render_template( './hellopage (copy).html' ) @socketio.on( 'my event' ) def handle_my_custom_event( json ): print( 'recieved something: ' + str( json ) ) socketio.emit( 'my_response', json ) #def hello(): # return "hello world!" if (__name__ == "__main__"): #app.run(port = 5000) socketio.run( app, debug = true ) and corresponding code front-end :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>my chat application</title> <style> div.msgbubble{ background-color: #ddd; padding: 5px 10px; border-radius: 10px; margin-bottom: 5px; } </style> <!-- bootstrap --> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container-fluid"> <div class="well text-center"> <h4>my chat app</h4> </div> <div class="col-sm-8"> <div id="nomsg"> <h1 style="color: #ccc">no message yet!</h1> <div class="msg-wrapper"></div> </div> </div> <div class="col-sm-4"> <form action="" method="post"> <b>type message below span. <span class="glyphicon glyphicon-arrow-down"></span> </b> <hr> <div class="form-group"> <label for="exampleinputemail1">user name</label> <input type="text" class="username form-control" id="exampleinputemail1" placeholder="user name"> </div> <div class="form-group"> <label for="exampleinputpassword1">message</label> <textarea class="message form-control" rows="3" class="message form-control" id="exampleinputpassword1" placeholder="message"></textarea> </div> <button type="submit" class="btn btn-success" >send <span class="glyphicon glyphicon-send"></span> </button> </form> </div> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> <script type="text/javascript">randomcolors()</script> <script> var socket = io.connect( 'http://127.0.0.1:5000' ) // broadcast message socket.on( 'connect', function() { socket.emit( 'my event',{ data : 'user connected' } ) } ) var form = $( 'form' ).on( 'submit', function( e ){ e.preventdefault() var user_name = $( 'input.username' ).val() var message = $( 'textarea.message' ).val() //console.log( user_name, message ) socket.emit( 'my event', { user : user_name, msg : message } ) // empty message field $( 'textarea.message' ).val( '' ).focus() } ) // capture message socket.on( 'my_response', function( msg ){ if ( typeof msg.user !== 'undefined' ) { $( 'h1' ).remove() $( 'div.msg-wrapper' ).append('<div class="msgbubble"><b>'+msg.user+'</b> '+msg.msg+'</div>') } console.log( msg ) } ) </script> </body> </html> the interface looks this:
how can have following modification on ?
- different color text every different client.
- to chat using two/three computers.
Comments
Post a Comment