websocket

Posted 可爱的红领巾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了websocket相关的知识,希望对你有一定的参考价值。

一、为什么需要 WebSocket?

初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。

举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

 

WebSocket的出现,使得浏览器具备了实时双向通信的能力

 

优点:支持双向通信,更灵活,更高效,可扩展性更好。

 

 

其他特点包括:

 

(1)建立在 TCP 协议之上,服务器端的实现比较容易。

 

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

 

(3)数据格式比较轻量,性能开销小,通信高效。

 

(4)可以发送文本,也可以发送二进制数据。

 

(5)没有同源限制,客户端可以与任意服务器通信。

 

(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

 

 

后端代码:

from flask import Flask,request,render_template
from geventwebsocket.handler import  WebSocketHandler  #
from gevent.pywsgi import  WSGIServer  #  启动服务 为了让的服务支持Wsgi
from geventwebsocket.websocket import WebSocket  # 实现你的websocket的模块
import json
app = Flask(__name__)

user_dict = {}

@app.route("/<username>")
def index(username):
    print(333)
    user_socket = request.environ.get("wsgi.websocket")  #把用户的信息存在了eviron字典中 然后键是wsgi.websocket  这样取到的是用户的信息
    print(user_socket)
    if user_socket:
        user_dict[username] = user_socket  #把用户的信息存进字典
        print(user_dict)
    while True:
        msg = user_socket.receive() #收到消息
        recv_msg = json.loads(msg)  #把你发来的消息反序列化

        send_msg = {
            "user_name":recv_msg.get("user_name"),  #取到username
            "msg":recv_msg.get("msg")  #取到用户信息
        }
        print(send_msg)
        for i in user_dict.values():  #循环你的消息字典 如果你的对象等于本机的  就直接返回 不去管
            if i == user_socket:
                continue
            i.send(json.dumps(send_msg))


@app.route("/ws")
def ws():
    print(333)
    return render_template("群聊.html")

if __name__ == "__main__":
    http_serv = WSGIServer(("0.0.0.0",9980),app,handler_class=WebSocketHandler)
    http_serv.serve_forever()

 

 

 

 

前端界面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
</head>
<body>
你的昵称: <input type="text" id="nickname">

<button onclick="connws()">连接服务器</button>

<br><br>
发送消息: <input type="text" id="talk">
<button onclick="send_msg()">发送消息</button>

<div style="width: 500px;height: 200px;border: 1px red solid;" id="text">

</div>
</body>

<script type="application/javascript">

    var user_name = null;
    var ws = null;
    function connws(){//这个是你的信息进行提交的时候
        user_name = document.getElementById("nickname").value;
        ws = new WebSocket("ws://192.168.11.63:9980/"+user_name);

        ws.onmessage = function(data){  // onmessage接收消息
            var recv_msg = JSON.parse(data.data);
            {#console.log(recv_msg);#}
            createDiv(recv_msg.user_name,recv_msg.msg) //把你发送的信息渲染到那个框中
        }
    }

    function send_msg(){ //这个你要发送的信息或者他人要发送的信息
        var talk = document.getElementById("talk").value;  //  获取你的提交的信息
        createDiv("w",talk);
        send_str = {
            user_name:user_name,
            msg:talk
        };
        ws.send(JSON.stringify(send_str));
    };

    function createDiv(self,content){  // 这个是提交信息的时候下面出现的对话框
        var divtag = document.createElement("div");  //定义个div标签
        var who = self+" : ";
        if (self == "w"){
            who = "我 : ";
        }
        divtag.innerText = who + content;  //如果事其他人的话就把你的信息给 他人的名字加上信息
           var text = document.getElementById("text");
           text.appendChild(divtag)
    }
</script>
</html>

 

以上是关于websocket的主要内容,如果未能解决你的问题,请参考以下文章

“未捕获的类型错误:无法在 Websocket Angular JS 上读取未定义的属性‘延迟’”

websocket弹簧启动设置

WebSocket - 关闭握手 Gorilla

WebSocket 在 1000 条消息后关闭

使用 FFmpeg 通过管道输出视频片段

低延迟 websocket html 5 游戏的数据包大小