码迷,mamicode.com
首页 > Web开发 > 详细

websocket实现单聊

时间:2018-12-21 19:40:32      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:cat   htm   child   oct   欢迎来到   index   button   ali   console   

server
#
@File: ws from flask import Flask, request, render_template from geventwebsocket.handler import WebSocketHandler from geventwebsocket.websocket import WebSocket # 我用来做语法提示 from gevent.pywsgi import WSGIServer import json app = Flask(__name__) # type:Flask # 存放用户对应的,收件人,发件人,以及信息 # 可以做聊天室 {聊天室id:[], 聊天室id:[]...} # 两个用户之间的聊天{"用户名":{信息}, "用户名":{信息}} user_socket_dict = {} # type:dict @app.route(/) def index(): return render_template(single.html) @app.route("/ws/<user>") def ws(user): user_socket = request.environ.get(wsgi.websocket) # type:WebSocket if user_socket: user_socket_dict[user] = user_socket print(len(user_socket_dict), user_socket_dict) while 1: msg = user_socket.receive() print(msg) # b"{from_user:xx, to_user:xx,msg:xx}" msg_dict = json.loads(msg) to_usocket = user_socket_dict.get(msg_dict.get("to_user")) # type:WebSocket to_usocket.send(json.dumps({"from_user": user, "to_user": msg_dict.get("to_user"), "msg": msg_dict.get("msg")})) if __name__ == __main__: http_server = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler) http_server.serve_forever()

 

single.html


<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <p>您的昵称:<input type="text" id="nick"> <button onclick="openws()">进入聊天室</button> </p> <p>给<input type="text" id="to_user">发送:<input type="text" id="message"> <button onclick="send_msg()">发送消息</button> </p> <div id="msg_list" style="width: 500px;"> </div> </body> <script type="application/javascript"> var ws = null; // ws.onopen = function(){ // alert("欢迎来到S14群喷"); // }; function openws() { var nick = document.getElementById("nick").value; ws = new WebSocket("ws://192.168.12.41:5000/ws/" + nick); ws.onmessage = function (ws_status) { console.log(ws_status.data); var msg_obj = JSON.parse(ws_status.data); var ptag = document.createElement("p"); ptag.innerText = msg_obj.from_user + " : " + msg_obj.msg; document.getElementById("msg_list").appendChild(ptag); }; } function send_msg() { var msg = document.getElementById("message").value; var from_user = document.getElementById("nick").value; var to_user = document.getElementById("to_user").value; var ptag = document.createElement("p"); ptag.style.cssText = "text-align: right;"; ptag.innerText = msg + " : " + from_user; document.getElementById("msg_list").appendChild(ptag); var msg_obj = { msg: msg, from_user: from_user, to_user: to_user }; ws.send(JSON.stringify(msg_obj)); }; </script> </html>

 

websocket实现单聊

标签:cat   htm   child   oct   欢迎来到   index   button   ali   console   

原文地址:https://www.cnblogs.com/xiao-xue-di/p/10157429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!