· 7 years ago · Sep 17, 2018, 02:30 PM
1app = Flask(__name__)
2
3app.config[ 'SECRET_KEY' ] = '12345'
4socketio = SocketIO( app )
5
6
7
8app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////mnt/c/Users/jach/desktop/chat/example.db'
9db = SQLAlchemy(app)
10
11class History(db.Model):
12 id = db.Column('id', db.Integer, primary_key=True)
13 username = db.Column('username', db.String(500))
14 message = db.Column('message', db.String(500))
15
16
17@app.route( '/' )
18def chat():
19 return render_template( './chat.html' )
20
21@socketio.on( 'my event' )
22def event( json ):
23 print( 'event recived : ' + str( json ) )
24
25 def handleMessage(msg):
26 username = History(msg.user_name)
27 message = History(msg.message)
28
29 db.session.add(username)
30 db.session.add(message)
31 db.session.commit()
32
33
34 socketio.emit( 'my response', json )
35
36if __name__ == '__main__':
37 socketio.run( app, host='0.0.0.0'
38, debug = True )
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<!DOCTYPE html>
56<html lang="en">
57 <head>
58 <meta charset="utf-8">
59 <meta http-equiv="X-UA-Compatible" content="IE=edge">
60 <meta name="viewport" content="width=device-width, initial-scale=1">
61
62 <title>Multi-user Chat App </title>
63
64 <!-- Bootstrap -->
65 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
66 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
67
68 <style>
69 div.text_box {
70 background-color: #98FB98 ;
71 border-radius: 15px;
72 padding: 5px 10px;
73 margin-bottom: 7px;
74 display: inline-block;
75 }
76
77 .well {
78 background-color: #BFEFFF;
79 }
80 </style>
81
82
83 </head>
84 <body>
85
86 <!-- <div class="text-center well"><b>Multi-user Chat Application </b></div> -->
87
88 <div class="text-center well well-lg" ><b><h1>Multi-user Chat Application</h1></b></div>
89
90 <div class="container">
91 <div class="col-sm-4">
92 <form action="" method="POST">
93 <b>Type your name & message below </b>
94 <div class="clearfix" style="margin-top: 5px;"></div>
95 <input type="text" class="username form-control" placeholder="Name">
96 <div style="padding-top: 5px;"></div>
97 <input type="text" class="message form-control" placeholder="Type your Message">
98 <div style="padding-top: 5px;"></div>
99 <button type="submit" class="btn btn-primary btn-block"> Send</button>
100 </form>
101 </div>
102
103
104
105
106
107
108
109 <div class="col-sm-5">
110 <div class="no_message">
111 <h2 style='color: #808080'>No message yet</h2>
112 <div class="message_box"></div>
113 </div>
114 </div>
115
116 </div>
117
118
119 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
120 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
121 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
122 <script>
123 var socket = io.connect( 'http://' + document.domain + ':' + location.port )
124 // broadcast a message
125 socket.on( 'connect', function() {
126 socket.emit( 'my event', {
127 data: 'User Connected'
128 } )
129 var form = $( 'form' ).on( 'submit', function( e ) {
130 e.preventDefault()
131 let user_name = $( 'input.username' ).val()
132 let user_input = $( 'input.message' ).val()
133 socket.emit( 'my event', {
134 user_name : user_name,
135 message : user_input
136 } )
137 // empty the input field
138 $( 'input.message' ).val( '' ).focus()
139 } )
140 } )
141 // capture message
142 socket.on( 'my response', function( msg ) {
143 console.log( msg )
144 if( typeof msg.user_name !== 'undefined' ) {
145 $( 'h2' ).remove()
146 $( 'div.message_box' ).append( '<div class="text_box"><b>'+msg.user_name+'</b> '+msg.message+'</div><br>' )
147
148 }
149 } )
150 </script>
151 </body>
152</html>