五、基于Websocket实现即时通讯(IM)：
服务器代码：
| from flask import Flask, request from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler import WebSocketHandler from geventwebsocket.exceptions import WebSocketError import json app = Flask(__name__) user_socket_dict = {} @app.route("/ws/<username>") def websocket(username): # 得到用户的链接 user_socket = request.environ.get("wsgi.websocket") # type:WebSocket user_socket_dict[username] = user_socket print(username+"链接成功！") while True: msg = user_socket.receive() # 接受消息 for socket in user_socket_dict.values(): # type:WebSocket if user_socket != socket:# 自己发消息服务器就不要再给自己回消息了 try: socket.send(json.dumps({"sender": username, "msg": msg})) except: continue if __name__ == '__main__': # 指定地址、端口号开启Websocket服务 http_serv = WSGIServer(("127.0.0.1", 8001), app, handler_class=WebSocketHandler) # 启动Websocket服务 http_serv.serve_forever() |
html代码：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> </head> <body> <p>请输入你的昵称：<input type="text" id="username"></p> <botton class="btn btn-default" onclick="createsocket()">点击创建链接</botton> <br> <p>请您输入消息：<input type="text" id="msg"></p> <buttom class="btn btn-success" onclick="send_msg()">发送消息</buttom> <br> <br> <br> <div style="border: 2px solid; width: 500px;height: 800px;" id="text_div"> </div> <script> var ws = null; var username = null; function createsocket() { username = document.getElementById("username").value; ws = new WebSocket("ws://127.0.0.1:8001/ws" + "/" + username); ws.onmessage = function (data) { var text_div = document.getElementById("text_div"); var obj_data = JSON.parse(data.data); var add_msg = "<p>" + obj_data.sender + ":" + obj_data.msg + "</p>"; text_div.innerHTML += add_msg; } } function send_msg() { var to_msg = document.getElementById("msg").value; var text_div = document.getElementById("text_div"); var add_msg = "<p style='text-align: right'>" + to_msg + ":" + username + "</p>"; text_div.innerHTML += add_msg; ws.send(to_msg); } </script> </body> </html> |
