WebSocket介绍

- 菜鸟教程详解连接

- 下载：pip install gevent-websocket

- WebSocket 是一种协议；是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议；

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，

允许服务端主动向客户端推送数据。

在 WebSocket API 中，

浏览器和服务器只需要完成一次握手，

两者之间就直接可以创建持久性的连接，并进行双向数据传输。

- 轮询：

是在特定的的时间间隔（如每1秒），

由浏览器对服务器发出HTTP请求，

然后由服务器返回最新的数据给客户端的浏览器。

传统轮询的缺点：

    浪费资源，

    服务器，客户端压力大

- 长轮询：

客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，

直到有新消息才返回响应信息并关闭连接，

客户端处理完响应信息后再向服务器发送新的请求。 

优点：在无消息的情况下不会频繁的请求，耗费资源小。

缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。

实例：WebQQ、Hi网页版、Facebook IM。

- WebScoket：

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，

连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，

你可以通过 send() 方法来向服务器发送数据，

并通过 onmessage 事件来接收服务器返回的数据。

WebSocket+Flask开启一个WebSocket服务

- 示例：

from flask import Flask, request

from geventwebsocket.handler import WebSocketHandler  # 开启WebSocket协议的服务

from gevent.pywsgi import WSGIServer  # WSGI 支持多线程的 socket

from geventwebsocket.websocket import WebSocket

app = Flask(__name__)

@app.route("/ws")

def ws():

    # print(request.environ)  # 打印原始的 request

    # print(request.environ.get("wsgi.websocket"))  # 获取ws对象

    ws = request.environ.get("wsgi.websocket")  # type: WebSocket

    data = ws.receive()

    print(data)

    ws.send("发送消息给前端")

if __name__ == '__main__':

    # 开启服务

    http_serv = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler)

    http_serv.serve_forever()

　　- 前端：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta 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>

<body>

<script>

    var ws = new WebSocket("ws://127.0.0.1:5000/we/" + username);

    ws.send("发送给客户端");

    ws.onmessage = function (data) {

        console.log(data.data);

    }

</script>

</body>

</html>

群聊小Demo

- 视图：

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_list = []

@app.route("/ws")

def ws():

    # print(request.environ.get("wsgi.websocket"))

    user_web_socket = request.environ.get("wsgi.websocket")  # type: WebSocket

    user_socket_list.append(user_web_socket)

    while 1:

        try:

            data = user_web_socket.receive()

            print(data)

            for user_socket in user_socket_list:

                if user_web_socket != user_socket:

                    user_socket.send(data)

        except:

            user_socket_list.remove(user_web_socket)

@app.route("/chat")

def chat():

    return render_template("ws.html")

if __name__ == '__main__':

    http_serv = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler)

    http_serv.serve_forever()

- 前端：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta 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>

<body>

<div>

    <p>发送消息：<input type="text" id="chat">

        <button onclick="send_msg()">发送</button>

    </p>

</div>

<div id="msg">

</div>

<script>

    var ws = new WebSocket("ws://127.0.0.1:5000/we");

    ws.onmessage = function (data) {

        let p_tag = document.createElement("p");

        p_tag.innerText = data.data;

        document.getElementById("msg").appendChild(p_tag);

    };

    function send_msg() {

        var msg = document.getElementById("chat").value;

        ws.send(msg);

    }

</script>

</body>

</html>

私聊小Demo

- 视图：

import json

from flask import Flask, render_template, request

from geventwebsocket.handler import WebSocketHandler  # 开启WebSocket协议的服务

from gevent.pywsgi import WSGIServer  # WSGI 支持多线程的 socket

from geventwebsocket.websocket import WebSocket

app = Flask(__name__)

"""

实现单人聊天原理：

    1，获取不同用户的用户名

        1.1 利用字典的形式，用户名为key

    2，获取指定发送到某用户的用户名

    3，获取数据

"""

web_socket_dict = {}

@app.route("/we/<username>")

def we(username):

    # print(request.environ)  # 打印原始的 request

    # print(request.environ.get("wsgi.websocket"))  # 获取ws对象

    ws = request.environ.get("wsgi.websocket")  # type: WebSocket

    web_socket_dict[username] = ws

    print(web_socket_dict)

    while 1:

        try:

            data_dict = ws.receive()  # 等待接受消息

            data = json.loads(data_dict)

            to_user = data.get("to_user")

            chat = data.get("chat")

            print(to_user, chat)

            to_from_ws = web_socket_dict.get(to_user)

            msg_data = {"from_user": username, "msg": chat}

            to_from_ws.send(json.dumps(msg_data))

        except:

            pass

        # ws.send("哼！")  # 接受到消息后，向前端发送消息

@app.route("/chat")

def chat():

    return render_template("chat.html")

if __name__ == '__main__':

    http_serv = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler)

    http_serv.serve_forever()

- 前端：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta 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>

<body>

<div>

    <p>请注册您的用户名：<input type="text" id="username"></p>

    <p>注册到服务器

        <button onclick="send_username()">提交</button>

    </p>

    <p>请输入您要发送给谁：<input type="text" id="to_user"></p>

    <p>请输入您想发送的内容：<input type="text" id="chat"></p>

    <p>

        <button onclick="send_chat()">提交</button>

    </p>

</div>

<div id="msg"></div>

<script>

    var ws = null;

    function send_username() {

        let username = document.getElementById("username").value;

        ws = new WebSocket("ws://127.0.0.1:5000/we/" + username);

        ws.onmessage = function (data) {

            console.log(data.data);

            let msg_data = JSON.parse(data.data);

            let ptag = document.createElement("p");

            ptag.innerText = msg_data.from_user + " : " + msg_data.msg;

            document.getElementById("msg").appendChild(ptag);

        }

    }

    function send_chat() {

        let to_user = document.getElementById("to_user").value;

        let chat = document.getElementById("chat").value;

        let data = {to_user: to_user, chat: chat};

        ws.send(JSON.stringify(data));

    }

</script>

</body>

</html>

WebSocket 笔记的更多相关文章

  1. 学习WebSocket笔记

    由于HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接. 当用户在浏览器上进行操作时,可以请求服务器上的api:但是反过来不可以:服务端发生了一件事,无法将这个事 ...

  2. websocket笔记

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6742746.html websocket -- 双向通信网 ...

  3. Spring 中使用 WebSocket 笔记

    编写 WebSocket 消息处理类,比较简单的方式就是直接继承AbstractWebSocketHandler,并覆写其中的处理方法,下面为一个简单的 demo public class WebSo ...

  4. 最新 .NET Core 中 WebSocket的使用 在Asp.Net MVC 中 WebSocket的使用 .NET Core 中 SignalR的使用

    ASP.NET MVC 中使用WebSocket 笔记 1.采用控制器的方法 这个只写建立链接的方法的核心方法 1.1 踩坑 网上都是直接 传个异步方法 直接接受链接 自己尝试了好多次链接是打开的,到 ...

  5. WebSocket学习笔记IE，IOS，Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

  6. WebSocket学习笔记——无痛入门

    WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报  分类: 物联网学习笔记(37)  版权声明:本文为博主原 ...

  7. Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例

    在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...

  8. SpringBoot学习笔记（11）：使用WebSocket构建交互式Web应用程序

    SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序 快速开始 本指南将引导您完成创建“hello world”应用程序的过程,该应用程序在浏览器和服务器之间来回发送消 ...

  9. WebSocket 学习笔记

    WebSocket 学习笔记 来自我的博客 因为项目原因需要用到双工通信,所以比较详细的学习了一下浏览器端支持的 WebSocket. 并记录一些遇到的问题. 简介 WebSocket 一般是指浏览器 ...

随机推荐

  1. TOJ 3517 The longest athletic track

    3517.   The longest athletic track Time Limit: 1.0 Seconds   Memory Limit: 65536KTotal Runs: 880   A ...

  2. solr环境搭建&基本使用

    分步指南 solr服务与tomcat整合 solr使用配置步骤 solr使用 推荐分词工具 相关的文章 一．Solr服务与tomcat整合 1.solr相关版本下载路径:http://archive. ...

  3. Android基础笔记（十三）- 内容提供者原理和简单使用

    为什么要有内容提供者 内容提供者的工作原理 使用内容解析者对内容提供者进行增删改查操作 利用内容提供者和内容解析者备份手机短信 利用内容提供者插入短信 为什么要有内容提供者 内容提供者技术的目的是: ...

  4. Swift 字典的经常用法

    /* * *要正确使用字典,也须要一些条件 * 1.字典键值对的键和值的类型必须明白,能够直接指定.也能够类似数组直接赋值由编译器自己主动识别 * 2,字典必需要初始化 * 3,键的类型必须是能够被哈 ...

  5. bzoj1026: [SCOI2009]windy数（传说你是数位DP）

    1026: [SCOI2009]windy数 题目:传送门 题解: 其实之前年少无知的时候好像A过...表示当时并不知道什么数位DP 今天回来深造一发... 其实如果对这个算法稍有了解...看到这题的 ...

  6. Git-如何将已存在的项目提交到git

    1.首先在码云或者github上创建一个不带README.md的项目,然后复制远程库的地址(下面以码云为例): 2.进入本地已存在的项目目录:house  touch README.md //新建说明 ...

  7. 文件共享服务器nfs搭建过程

    网络文件共享服务器192. yum install -y nfs-utils 在exports文件中添加的从机范围 vim /etc/exports /home/nfs/ (rw,sync,fsid= ...

  8. 数位$dp$

    数位\(dp\)搞了一上午才搞懂.靠这种傻\(X\)的东西竟然花了我一上午的时间. 数位\(dp\) 概念 数位\(dp\)就是强制你分类一些数,例如给你一段区间,然后让你求出不包含\(2\)的数的个 ...

  9. IHttpHandler的学习（1）

    IHttpHandler的那些事 今晚看了一晚上的IHttpHAndler的知识, 在自定义了Httphandler后,在配置webconfig里配置也是个技术活,什么集成模式,什么asp管道什么的: ...

  10. Bayes++ Library入门学习之熟悉class-Bayesian_filter_base(2)

    前面我们已经熟悉了Bayesian_filter::Bayes_filter_base和其子类的击继承关系,接下来我们开始学习该类的实现. bayesFlt.hpp文件为其实现主体,首先是两个常规的头 ...