WebSocket建立聊天室
阿新 • • 發佈：2018-11-11
基於python中flask框架實現
所以依賴的環境：
python3 flask gevent-webs
一，帶暱稱的群聊
#!/usr/bin/env python # -*- coding:utf8 -*- import json from flask import Flask, request, render_template from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler importWebSocketHandler app = Flask(__name__) user_socket_dict = {} @app.route("/") def index(): return render_template("index_nickname.html") @app.route("/ws/<nick_name>") # ws://127.0.0.1:8000/ws def ws(nick_name): # print(request.environ) # print(request.environ.get("wsgi.websocket"))# 連結 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78> user_socket = request.environ.get("wsgi.websocket") # type:WebSocket # 寫上這個，程式碼可以有提示 if user_socket: user_socket_dict[nick_name] = user_socket else: return render_template("index.html", msg="請使用web_socket連結") while 1: msg = user_socket.receive() for user_name, u_socket in user_socket_dict.items(): # type:WebSocket if user_socket != u_socket: # 不給自己發訊息 try: u_socket.send(json.dumps({"nick_name": nick_name, "msg": msg})) # 傳送人是 except Exception as e: continue if __name__ == '__main__': http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler) # 使用WSGIServer，而不是flask自帶的werkzeug,處理, 如果本次請求是ws開頭的,就交給WebSocketHandler # 處理資料(給environ中新增websocket相關的鍵值對),處理完之後交給app http_server.serve_forever() # app.run()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ msg }} <h1>群P開始了</h1> 輸入你的暱稱:<input type="text" id="nick_name"> <button onclick="createWebsocket()">連結群聊</button> 編輯訊息:<input type="text" id="msg_s"> <button onclick="send_msg()">傳送</button> <div style="border: 2px solid; width: 500px;height: 800px;" id="text_div"> </div> <script> var ws = ""; var text_div = document.getElementById("text_div"); var nickName = ""; function createWebsocket() { let nick_name = document.getElementById("nick_name").value; nickName = nick_name; let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName); // 把名稱當作url引數發過去 ws = w_s; console.log("ws://127.0.0.1:8000/ws/" + nickName); ws.onmessage = function (data) { var obj_data = JSON.parse(data.data); console.log(data.data); var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>'; text_div.innerHTML += p_ele }} function send_msg() { var msg_s = document.getElementById("msg_s").value; let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>"; text_div.innerHTML += p_ele_s; ws.send(msg_s); } </script> </body> </html>index.html
二，帶暱稱的單聊
#!/usr/bin/env python # -*- coding:utf8 -*- import json from flask import Flask, request, render_template from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler import WebSocketHandler app = Flask(__name__) user_socket_dict = {} @app.route("/") def index(): return render_template("index_nickname_danren.html") @app.route("/ws/<nick_name>") # ws://127.0.0.1:8000/ws def ws(nick_name): # print(request.environ) # print(request.environ.get("wsgi.websocket")) # 連結 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78> user_socket = request.environ.get("wsgi.websocket") # type:WebSocket # 寫上這個，程式碼可以有提示 if user_socket: user_socket_dict[nick_name] = user_socket else: return render_template("index.html", msg="請使用web_socket連結") while 1: msg = user_socket.receive() msg_dict = json.loads(msg) to_user = msg_dict.get('to_user') msg = msg_dict.get("msg") to_user_socket = user_socket_dict.get(to_user) # type:WebSocket to_user_socket.send(json.dumps({"nick_name": nick_name, "msg": msg})) if __name__ == '__main__': http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler) # 使用WSGIServer，而不是flask自帶的werkzeug,處理, 如果本次請求是ws開頭的,就交給WebSocketHandler # 處理資料(給environ中新增websocket相關的鍵值對),處理完之後交給app http_server.serve_forever() # app.run()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ msg }} <h1>群P開始了</h1> 輸入你的暱稱:<input type="text" id="nick_name"> <button onclick="createWebsocket()">連結群聊</button> <p>與：<input type="text" id="to_user">輕聲細語</p> 編輯訊息:<input type="text" id="msg_s"> <button onclick="send_msg()">傳送</button> <div style="border: 2px solid; width: 500px;height: 800px;" id="text_div"> </div> <script> var ws = ""; var text_div = document.getElementById("text_div"); var nickName = ""; function createWebsocket() { let nick_name = document.getElementById("nick_name").value; nickName = nick_name; let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName); // 把名稱當作url引數發過去 ws = w_s; console.log("ws://127.0.0.1:8000/ws/" + nickName); ws.onmessage = function (data) { var obj_data = JSON.parse(data.data); console.log(data.data); var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>'; text_div.innerHTML += p_ele }} function send_msg() { var msg_s = document.getElementById("msg_s").value; var to_user = document.getElementById("to_user").value; let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>"; text_div.innerHTML += p_ele_s; var msg_obj = JSON.stringify({to_user:to_user,msg:msg_s}); ws.send(msg_obj); } </script> </body> </html>index.html