Flask WebSocket 跨域访问实例：Echo 示例与客户端代码
<h2>Flask 实现跨域访问的 WebSocket 示例：Echo 示例</h2>
<p>本示例展示了使用 Flask 和 Flask-Sockets 库实现一个支持跨域访问的 WebSocket 服务，并提供了客户端代码示例。服务器端会将接收到的消息原样回传，客户端可以发送消息并接收服务端返回的信息。</p>
<h3>服务器端代码：pythonfrom flask import Flaskfrom flask_sockets import Sockets</h3>
<p>app = Flask(<strong>name</strong>)sockets = Sockets(app)</p>
<p>@sockets.route('/echo')def echo_socket(ws): while not ws.closed: message = ws.receive() if message is not None: ws.send(message)</p>
<p>if <strong>name</strong> == '<strong>main</strong>': from gevent import pywsgi from geventwebsocket.handler import WebSocketHandler server = pywsgi.WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler) server.serve_forever()</p>
<h3>客户端代码：html<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>WebSocket Example</title> <script> var ws = new WebSocket('ws://localhost:5000/echo'); ws.onopen = function() { console.log('WebSocket opened'); }; ws.onmessage = function(event) { console.log('WebSocket message received: ' + event.data); }; ws.onclose = function() { console.log('WebSocket closed'); }; function sendMessage() { var message = document.getElementById('message').value; ws.send(message); } </script></head><body> <input type='text' id='message'> <button onclick='sendMessage()'>Send</button></body></html></h3>
<h3>注意事项：</h3>
<ol>
<li>服务器端需要安装 <code>flask-sockets</code> 和 <code>gevent</code> 库。2. 客户端需要在浏览器中打开，因为浏览器支持 WebSocket 协议。3. 如果客户端和服务器端不在同一个域名下，需要在服务器端添加跨域访问的设置。例如在 Flask 中，可以使用 <code>Flask-CORS</code> 扩展来实现。</li>
</ol>
<h2>跨域访问设置</h2>
<p>为了解决跨域访问问题，可以使用 <code>Flask-CORS</code> 扩展。在安装 <code>Flask-CORS</code> 后，在 Flask 应用中初始化该扩展，并配置允许跨域访问的域名或其他参数。pythonfrom flask import Flaskfrom flask_sockets import Socketsfrom flask_cors import CORS</p>
<p>app = Flask(<strong>name</strong>)CORS(app) # 初始化 Flask-CORS 扩展sockets = Sockets(app)</p>
<h1>... 其他代码 ...</h1>
<p><strong>注意：</strong> 在实际应用中，需要根据具体情况调整 <code>CORS</code> 的配置参数，以确保安全性和可靠性。</p>
<h2>代码解析</h2>
<p>服务器端代码使用 <code>flask-sockets</code> 库创建了一个 WebSocket 路由 <code>/echo</code>。当客户端连接到该路由时，服务端会进入循环，不断接收客户端发送的消息，并将其原样回传。</p>
<p>客户端代码使用 <code>WebSocket</code> 对象连接到服务器端的 WebSocket 路由。当连接建立成功后，客户端会注册 <code>onopen</code>、<code>onmessage</code> 和 <code>onclose</code> 事件，分别用于处理连接建立、接收消息和连接关闭等事件。</p>
<h2>总结</h2>
<p>本示例展示了使用 Flask 和 Flask-Sockets 库实现一个支持跨域访问的 WebSocket 服务，并提供了客户端代码示例。该示例可以作为开发其他 WebSocket 应用的参考。</p>
原文地址: https://www.cveoy.top/t/topic/mC7K 著作权归作者所有。请勿转载和采集!