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 一般是指浏览器 ...
随机推荐
- 3D ShapeNets: A Deep Representation for Volumetric Shapes 代码遇到的问题
遇到 Error using polygon2voxel_double Requested 515396075640x140711718551672x140719189273184 (17179869 ...
- Mysql学习总结（25）——MySQL外连接查询
1.左外连接left outer join或者left jion,outer可以省略不写,下边的右连接和全连接也一样: 左外连接的意思是,以left join左边的表中的数据为基准,即左边的表中有的必 ...
- MAVEN自己主动部署到tomcat
前面几篇文章maven生成的war包都是手动部署到tomcat,显然这样是非常麻烦的.那么这一篇文章就来介绍一个怎样使用maven高速自己主动的部署项目到tomcat容器中. 1.首先我们须要配置to ...
- ubuntu 14.04 桌面版关闭图形界面
ubuntu 14.04 桌面版关闭图形界面 问题: 怎样将ubuntu14.04设置为文本模式启动? 解决方式: 改动改GRUB 的配置文件(不建议直接改 grub.conf) $sudo vim ...
- oracle新手随记10
1. unpivot注意点:select new_col from (select ename,job,to_char(sal) as sal,null as c from emp) ...
- Linux 命令行光标快速选中移动快捷键
Ctrl+Alt+T 打开终端一些常用的终端快捷键:Ctrl+L 清空屏幕(功能相当于命令clear)Ctrl+U 剪切文本直到行的起始(可以用于清空行)Ctrl+K 剪切文本直到行的末尾Ctrl+Y ...
- django 笔记16 文件上传笔记
views.py文件 def upload_file(request): username = request.POST.get('username') fafafa = request.FILES. ...
- ckeidtor编辑器添加图片上传功能
1.ckeditor默认没有上传图片功能,只能通过Url显示图片,图下图 2.首先说明,ckeditor是有上传功能的,只是隐藏了,需要通过配置让它显示 找到ckeditor/plugins/imag ...
- [学习笔记]AJAX学习
AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...
- 升级JDK9后eclipse无法启动的解决方法
解决方法-打开: D:\Program Files\eclipse\eclipse.ini 在文件末尾添加一行: --add-modules=ALL-SYSTEM 再次启动eclipse即可 感谢ht ...