WebSocket 笔记
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 笔记的更多相关文章
- 学习WebSocket笔记
由于HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接. 当用户在浏览器上进行操作时,可以请求服务器上的api:但是反过来不可以:服务端发生了一件事,无法将这个事 ...
- websocket笔记
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6742746.html websocket -- 双向通信网 ...
- Spring 中使用 WebSocket 笔记
编写 WebSocket 消息处理类,比较简单的方式就是直接继承AbstractWebSocketHandler,并覆写其中的处理方法,下面为一个简单的 demo public class WebSo ...
- 最新 .NET Core 中 WebSocket的使用 在Asp.Net MVC 中 WebSocket的使用 .NET Core 中 SignalR的使用
ASP.NET MVC 中使用WebSocket 笔记 1.采用控制器的方法 这个只写建立链接的方法的核心方法 1.1 踩坑 网上都是直接 传个异步方法 直接接受链接 自己尝试了好多次链接是打开的,到 ...
- WebSocket学习笔记IE，IOS，Android等设备的兼容性问
WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...
- WebSocket学习笔记——无痛入门
WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报 分类: 物联网学习笔记(37) 版权声明:本文为博主原 ...
- Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...
- SpringBoot学习笔记（11）：使用WebSocket构建交互式Web应用程序
SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序 快速开始 本指南将引导您完成创建“hello world”应用程序的过程,该应用程序在浏览器和服务器之间来回发送消 ...
- WebSocket 学习笔记
WebSocket 学习笔记 来自我的博客 因为项目原因需要用到双工通信,所以比较详细的学习了一下浏览器端支持的 WebSocket. 并记录一些遇到的问题. 简介 WebSocket 一般是指浏览器 ...
随机推荐
- (52)KeyError错误
当出现:22KeyError: 'xxxxxx'这样的错误,可以肯定依赖出问题了,一般是你引用某个字段,但没有定义,又没有指定依赖的模块,最后找不到对应字段 解决方法:开发工具,把 xxxxxx 去搜 ...
- HNU 13108 Just Another Knapsack Problem DP + Trie树优化
题意: 给你一个文本串,和一些模式串,每个模式串都有一个价值,让你选一些模式串来组成文本串,使获得的价值最大.每个模式串不止能用一次. 思路: 多重背包,枚举文本串的每个位置和模式串,把该模式串拼接在 ...
- Android笔记---点击事件的四种写法
Android 点击事件的四种写法: 1. 以内部类的形式实现 OnClickListener 接口.定义点击事件 class MainActivity extents Activity{ // .. ...
- 适配 iOS 8 时遇到的问题两则：远程推送和 Unwind Segue
原文:http://imtx.me/archives/1910.html 昨天我在微博上吐槽:iOS 8 / Xcode 6 真是史上对开发人员最糟糕的版本号了.收到非常多朋友表达同感. 之所以这么说 ...
- Python图像处理库PIL的ImageStat模块介绍
ImageStat模块用于计算整个图像或者图像的一个区域的统计数据. 一.ImageStat模块的函数 1. Stat 定义1:ImageStat.Stat(image)⇒ Stat instanc ...
- rest_framework 权限功能
权限: 问题:不用视图不用权限可以访问 基本使用 写上一个权限类 创建utils 中 permission.py文件 class SvipPermisson(object): message = &q ...
- python-logging写日志编码问题
python-logging写日志编码问题 标签(空格分隔): python 修改logging.FileHandler() 指定编码格式为:utf8 重新运行
- Webfont 的兼容性问题[持续更新]
低版安卓手机的 webview 显示不了,另外黑莓手机显示出来是这样: 生成工具: 离线字体生成工具:webfont 在线字体生成平台:icomoon.io, iconfont.cn均有问题 其他一些 ...
- PostgreSQL Replication之第五章 设置同步复制（3）
5.3 冗余和停止复制 谈到同步复制,有一个现象一定不能被遗漏.想象一下,我们有一个同步复制的双节点集群.如果slave故障会发生什么?答案是master不能容易地区分慢slave和故障slave,因 ...
- <Sicily>Catch the thief
一.题目描述 A thief has robbed a bank in city 1 and he wants to go to city N. The police know that the th ...