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 一般是指浏览器 ...
随机推荐
- [HDU5688]2016"百度之星" - 资格赛 Problem D
题目大意:给你n个字符串,如果一个字符串可以通过重新排列变成另一个字符串,则认为这两个字符串相等.每输入一个字符串,输出这个字符串和与它相等的之前出现了几次. 解题思路:我们可以用map保存一个字符串 ...
- FTP 无法获取目录列表的处理方法
FTP 无法获取目录列表的处理方法 1.以阿里云的服务器为例 对于阿里云的服务器是因为阿里云为了进一步保护用户的安全利益使用了安全策略组,我们要设置安全策略组对应的端口开启. 首先要设置端口范围,这个 ...
- 浅谈python 中正则的一些函数
主要的函数有 : match() search() findall() group() groups() split() match (): 含义 开头匹配,匹配成功返回一个对象失败则 ...
- 【BZOJ 1588】 [HNOI2002]营业额统计
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每天的最小波动值指的是和之前所有天的差值的绝对值中的最小值. 用set.的lower_bound函数. 每次找和他差值最小的数字就好 ...
- Android开发学习之事件处理和Button具体解释
Android的事件处理机制: 1.基于监听器的事件处理 --- 组件绑定特定的事件监听器 --- 重点 2.基于回调的事件处理 --- 主要做法是重写Android组件特定的回调函数, ...
- 可替代google的各种搜索引擎
http://www.aol.com http://www.duckduckgo.com http://www.gfsoso.com http://www.googlestable.com http ...
- POJ 2739 Sum of Consecutive Prime Numbers(素数)
POJ 2739 Sum of Consecutive Prime Numbers(素数) http://poj.org/problem? id=2739 题意: 给你一个10000以内的自然数X.然 ...
- iOS代码添加视图约束
项目要做这样一个效果的启动页. 考虑到版本号是会不断变更的,因此采用动画效果启动页,让版本号动态加载iOS启动页动画效果 - 简书 考虑到屏幕适配问题,因此采用代码对视图添加约束.在添加约束的过程中遇 ...
- rest_framework-节流-总结完结篇
列表从后往前读 #1.在request中获取IP#2.访问记录 VISIT_RECORD = {} 放缓存 数据库 都可以 建议缓存import timeclass VisitThrottle(obj ...
- BZOJ4479 [JSOI2013] 吃货jyy 解题报告(三进制状态压缩+欧拉回路)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4479 Description [故事背景]作为JSOI的著名吃货,JYY的理想之一就是吃 ...