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 一般是指浏览器 ...
随机推荐
- Java将WKT格式的Geomotry转换成GeoJSON
一.Meven添加依赖 <!-- 引入json处理包 --> <dependency> <groupId>com.alibaba</groupId> & ...
- Json相关内容
一. 导入包:net.sf.json.JSONObject 代码 import net.sf.json.JSON; import net.sf.json.JSONArray; import net.s ...
- 从头认识java-18.6 synchronized在其它对象上同步和ThreadLocal来消除共享对象的同步问题
这一章节我们来介绍在其它对象上同步与ThreadLocal. 前一章节我们使用了 1.synchronized在其它对象上同步 class ThreadA implements Runnable { ...
- Beat 'Em Up Game Starter Kit (横版格斗游戏) cocos2d-x游戏源代码
浓缩精华.专注战斗! 游戏的本质是什么?界面?养成?NoNo! 游戏来源于对实战和比赛的模拟,所以它的本源就是对抗.就是战斗! 是挥洒热血的一种方式! 一个游戏最复杂最难做的是什么?UI?商城? ...
- Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源代码
在android学习中,动作交互是软件中重要的一部分.当中的Scroller就是提供了拖动效果的类,在网上.比方说一些Launcher实现滑屏都能够通过这个类去实现.以下要说的就是上次Scroller ...
- java 基本类型、包装类、字符串之间的转换
1.基本类型和包装类 基本类型和包装类可通过自动装箱和拆箱实现. int i = 24; Integer a = new Integer(i); //手动装箱 Integer b = i; //自动装 ...
- bzoj1010: [HNOI2008]玩具装箱toy（DP+斜率优化）
1010: [HNOI2008]玩具装箱toy 题目:传送门 题解: 很明显的一题动态规划... f[i]表示1~i的最小花费 那么方程也是显而易见的:f[i]=min(f[j]+(sum[i]-su ...
- bzoj1051: [HAOI2006]受欢迎的牛（强联通）
1051: [HAOI2006]受欢迎的牛 题目:传送门 题解: 今天又做一道水题... 强联通啊很明显 水个模板之后统计一下每个强联通分量中点的个数,再统计一下出度... 不难发现:缩点之后当且仅当 ...
- springboot actuator shutdown正确的关闭操作
今天整合ehcache时发现一个很重要的问题,就是程序关闭(硬关闭)之后,持久化到磁盘的缓存数据没能正确写入加载,问题还是硬关闭的问题,所以就使用actuator 进行监听 <dependenc ...
- ubuntu创建文件夹桌面快捷方式
最近在使用dropbox,用来存储一些自己的markdown笔记和pdf文件.觉得放一个快捷方式在桌面上比较方便,但是lxde似乎没有直接创建桌面快捷方式的功能(或者是我没有找到),就上网查了一下,顺 ...