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

websocket-单群聊

时间:2019-06-05 21:55:25      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:创建   持久性   index   sage   def   java   技术   baidu   oct   

简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。

WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
 

Web - Socket  客户端 与 服务器 达成一个协议
websocket 客户端 与 websocket 服务器 达成一个websocket协议

 

来个小例子方便大家理解:

技术图片

 

ws-socket.py

from flask import Flask,request
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer    #应用程序网端接口的一个服务
from  geventwebsocket.websocket import WebSocket     #做语法提示用

app = Flask(__name__)

@app.route("/conn_ws")
def ws_app():
    # print(request.environ)  请求原始信息
    use_socket = request.environ.get("wsgi.websocket") #type:WebSocket   #告诉编译器 use_socket的语法去WebSocket里面进行查找
    #返回值是<geventwebsocket.websocket.WebSocket object at 0x000001FE56EDD868>
    while True:
        msg = use_socket.receive()  #接收浏览器发来的消息
        print(msg)
        use_socket.send(msg)        #将接收到的消息返回给浏览器
       

http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler) #websocket不支持 Werkzeug,只支持wsgi,所以将Werkzeug替换掉; 如果不是Http请求,需要用WebSocketHandler处理机制
http_serv.serve_forever() #启动

my_ws.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script type="application/javascript">     
    var ws = new WebSocket("ws://127.0.0.1:9527/conn_ws");   #创建一个ws的请求地址
    ws.onmessage=function (messageEvent) {       #接收服务器send到浏览器端的消息,一旦有消息会触发onmessage 机制
      console.log(messageEvent.data) 
    }
</script> </html>

 

websocket实现单群聊

ws-socket.py

import json

from flask import Flask,request,render_template

from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket

app = Flask(__name__)

user_socket_dict = {}

@app.route(/conn/ws/<user_nick>)
def ws_app(user_nick):
    user_socket = request.environ.get(wsgi.websocket)
    user_socket_dict[user_nick] = user_socket

    while True:
        msg = user_socket.receive()
        print(msg)
        msg_dict = json.loads(msg)
        to_user = msg_dict.get(to_user)
        if to_user:
            to_user_socket = user_socket_dict.get(to_user)  #如果昵称存在,则是单聊;昵称为空,为群聊
            to_user_socket.send(msg)
        else:
            for socket in list(user_socket_dict.values()):
                socket.send(msg)


@app.route(/)
def index():
    return render_template(my_ws.html)
if __name__ == __main__:
    http_server = WSGIServer((0.0.0.0,8888),app,handler_class=WebSocketHandler)
    http_server.serve_forever()

 

my_ws.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="nick"><button onclick="login()">登录聊天室</button>
<p>发送给: <input type="text" id="to_user"> 消息: <input type="text" id="msg"></p>
<button id="send_btn" onclick="send()">发送</button>

<p>
<div id="chat_list">

</div>
</p>

</body>
<script type="application/javascript">
    var ws = null;

    function login() {
        var nick = document.getElementById(nick).value;
        ws = new WebSocket(ws://127.0.0.1:8888/conn/ws/+nick);
        ws.onmessage = function (messageEvent) {
            console.log(messageEvent.data);
            var ptag = document.createElement(p);   #聊天记录
            var message = JSON.parse(messageEvent.data);
            ptag.innerText = message.from_user + : + message.message;
            document.getElementById(chat_list).appendChild(ptag);
    };
    }

    function send() {
        var message = document.getElementById(msg).value;
        var to_user = document.getElementById(to_user).value;
        console.log(to_user);
        if(to_user == null){
            to_user = ‘‘
        }
        var send_str = {
            from_user:document.getElementById(nick).value,
            to_user:to_user,
            message:message
        };
        var json_send_str = JSON.stringify(send_str);
        ws.send(json_send_str);
    }
</script>
</html>

 

websocket-单群聊

标签:创建   持久性   index   sage   def   java   技术   baidu   oct   

原文地址:https://www.cnblogs.com/yaraning/p/10981720.html

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