Flask-SocketIO如何使用

今天小编给大家分享一下Flask-SocketIO如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名、网页空间、营销软件、网站建设、清水网站维护、网站推广。

Flask-SocketIO 使 Flask 应用程序能够访问客户端和服务器之间的低延迟双向通信。客户端应用程序可以使用 Javascript,C ++,Java 和 Swift 中的任何 SocketIO 官方客户端库或任何兼容的客户端来建立与服务器的永久连接。

安装

直接使用 pip 来安装:

pip install flask-socketio

要求

Flask-SocketIO 兼容 Python 2.7 和 Python 3.3+。可以从以下三个选项中选择此程序包所依赖的异步服务:

  • eventlet 性能最佳,支持长轮询和 WebSocket 传输。

  • gevent 在许多不同的配置中得到支持。gevent 包完全支持长轮询传输,但与 eventlet 不同,gevent 没有本机 WebSocket 支持。要添加对 WebSocket 的支持,目前有两种选择:安装 gevent-websocket  包为 gevent 增加 WebSocket 支持,或者可以使用带有 WebSocket 功能的 uWSGI  Web 服务器。gevent 的使用也是一种高性能选项,但略低于 eventlet。

  • 也可以使用基于 Werkzeug 的 Flask 开发服务器,但需要注意的是,它缺乏其他两个选项的性能,因此它只应用于简单的开发环境。此选项仅支持长轮询传输。

扩展会根据安装的内容自动检测要使用的异步框架。优先考虑 eventlet,然后是 gevent。对于 gevent 中的WebSocket 支持,首选 uWSGI,然后是 gevent-websocket。如果既未安装 eventlet 也未安装 gevent,则使用 Flask 开发服务器。

如果使用多个进程,则进程使用消息队列服务来协调诸如广播之类的操作。支持的队列是 redis,RabbitMQ以及 Kombu 软件包支持的任何其他消息队列 。

在客户端,官方 Socket.IO Javascript 客户端库可用于建立与服务器的连接。还有使用 Swift,Java 和 C ++ 编写的官方客户端。非官方客户端也可以工作,只要它们实现 Socket.IO协议。

初始化

以下代码示例演示如何将 Flask-SocketIO 添加到 Flask 应用程序:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

if __name__ == '__main__':
socketio.run(app, host='0.0.0.0', debug=True)

以上代码即完成了一个简单的 Web 服务器。

socketio.run()函数封装了 Web 服务器的启动,并替换了app.run()标准的 Flask 开发服务器启动。

当应用程序处于调试模式时,Werkzeug 开发服务器仍然在内部使用和配置正确socketio.run()。

在生产模式中,如果可用,则使用 eventlet Web 服务器,否则使用 gevent Web 服务器。如果未安装 eventlet 和gevent,则使用 Werkzeug 开发 Web 服务器。

基于 Flask 0.11 中引入的单击的命令行界面。此扩展提供了适用于启动 Socket.IO 服务器的新版本命令。用法示例:flask run。

$ FLASK_APP=my_app.py flask run

或者直接使用下面方式,也可以启动项目:

$ python2.7 app.py

连接事件

Flask-SocketIO 调度连接和断开事件。以下示例显示如何为它们注册处理程序:

@socketio.on('connect', namespace='/test')
def test_connect():
emit('my response', {'data': 'Connected'})

@socketio.on('disconnect', namespace='/test')
def test_disconnect():
print('Client disconnected')

连接事件处理程序可以选择返回False以拒绝连接。这样就可以在此时对客户端进行身份验证。

请注意,连接和断开连接事件将在使用的每个命名空间上单独发送。

接收消息

使用 SocketIO 时,双方都会将消息作为事件接收。在客户端使用 Javascript 回调。使用 Flask-SocketIO,服务器需要为这些事件注册处理程序,类似于视图函数处理路由的方式。

以下示例为未命名的事件创建服务器端事件处理程序:

@socketio.on('message')
def handle_message(message):
print('received message: ' + message)

上面的示例使用字符串消息。另一种类型的未命名事件使用 JSON 数据:

@socketio.on('json')
def handle_json(json):
print('received json: ' + str(json))

最灵活的方式是使用自定义事件名称,在开发过程中最常用的也是这种方式。

事件的消息数据可以是字符串,字节,整数或 JSON:

@socketio.on('my event')
def handle_my_custom_event(json):
print('received json: ' + str(json))

自定义命名事件也可以支持多个参数:

@socketio.on('my event')
def handle_my_custom_event(arg1, arg2, arg3):
print('received args: ' + arg1 + arg2 + arg3)

Flask-SocketIO 支持 SocketIO 命名空间,允许客户端在同一物理套接字上复用多个独立连接:

@socketio.on('my event', namespace='/test')
def handle_my_custom_namespace_event(json):
print('received json: ' + str(json))

如果未指定名称空间,'/'则使用具有名称的默认全局名称空间 。

对于装饰器语法不方便的情况,on_event可以使用该方法:

def my_function_handler(data):
pass

socketio.on_event('my event', my_function_handler, namespace='/test')

客户端可以请求确认回叫,确认收到他们发送的消息。处理函数返回的任何值都将作为回调函数中的参数传递给客户端:

@socketio.on('my event')
def handle_my_custom_event(json):
print('received json: ' + str(json))
return 'one', 2

在上面的示例中,将使用两个参数调用客户端回调函数,'one'和2。如果处理程序函数未返回任何值,则将调用客户端回调函数而不带参数。

发送消息

如上一节所示定义的 SocketIO 事件处理程序可以使用send()和emit() 函数将回复消息发送到连接的客户端。

以下示例将收到的事件退回给发送它们的客户端:

from flask_socketio import send, emit

@socketio.on('message')
def handle_message(message):
send(message)

@socketio.on('json')
def handle_json(json):
send(json, json=True)

@socketio.on('my event')
def handle_my_custom_event(json):
emit('my response', json)

注意如何send()和emit()分别用于无名和命名事件。

当有命名空间的工作,send()并emit()默认使用传入消息的命名空间。可以使用可选namespace参数指定不同的命名空间:

@socketio.on('message')
def handle_message(message):
send(message, namespace='/chat')

@socketio.on('my event')
def handle_my_custom_event(json):
emit('my response', json, namespace='/chat')

要发送具有多个参数的事件,请发送元组:

@socketio.on('my event')
def handle_my_custom_event(json):
emit('my response', ('foo', 'bar', json), namespace='/chat')

SocketIO 支持确认回调,确认客户端收到了一条消息:

def ack():
print 'message was received!'

@socketio.on('my event')
def handle_my_custom_event(json):
emit('my response', json, callback=ack)

使用回调时,Javascript 客户端会收到一个回调函数,以便在收到消息时调用。客户端应用程序调用回调函数后,服务器将调用相应的服务器端回调。如果使用参数调用客户端回调,则这些回调也作为服务器端回调的参数提供。

广播

SocketIO 的另一个非常有用的功能是广播消息。SocketIO 支持通过此功能broadcast=True可选参数send()和emit():

@socketio.on('my event')
def handle_my_custom_event(data):
emit('my response', data, broadcast=True)

在启用广播选项的情况下发送消息时,连接到命名空间的所有客户端都会接收它,包括发件人。如果未使用名称空间,则连接到全局名称空间的客户端将收到该消息。请注意,不会为广播消息调用回调。

在此处显示的所有示例中,服务器响应客户端发送的事件。但对于某些应用程序,服务器需要是消息的发起者。这对于向客户端发送通知在服务器中的事件(例如在后台线程中)非常有用。socketio.send()和socketio.emit()方法可用于广播到所有连接的客户端:

def some_function():
socketio.emit('some event', {'data': 42})

请注意,socketio.send()与socketio.emit()在上下文理解上和send()与emit()功能不同。另请注意,在上面的用法中没有客户端上下文,因此broadcast=True是默认的,不需要指定。

房间

对于许多应用程序,有必要将用户分组为可以一起寻址的子集。最好的例子是具有多个房间的聊天应用程序,其中用户从他们所在的房间接收消息,而不是从其他用户所在的其他房间接收消息。SocketIO 支持通过房间的概念join_room()和leave_room()功能:

from flask_socketio import join_room, leave_room

@socketio.on('join')
def on_join(data):
username = data['username']
room = data['room']
join_room(room)
send(username + ' has entered the room.', room=room)

@socketio.on('leave')
def on_leave(data):
username = data['username']
room = data['room']
leave_room(room)
send(username + ' has left the room.', room=room)

在send()和emit()函数接受一个可选room导致被发送到所有的都在定房客户端的消息的说法。

所有客户端在连接时都会被分配一个房间,以连接的会话ID命名,可以从中获取request.sid。给定的客户可以加入任何房间,可以给出任何名称。当客户端断开连接时,它将从其所在的所有房间中删除。无上下文socketio.send() 和socketio.emit()函数也接受一个room参数,以广播给房间中的所有客户端。

由于为所有客户端分配了个人房间,为了向单个客户端发送消息,客户端的会话 ID 可以用作房间参数。

错误处理

Flask-SocketIO还可以处理异常:

@socketio.on_error()# Handles the default namespace
def error_handler(e):
pass

@socketio.on_error('/chat') # handles the '/chat' namespace
def error_handler_chat(e):
pass

@socketio.on_error_default# handles all namespaces without an explicit error handler
def default_error_handler(e):
pass

错误处理函数将异常对象作为参数。

还可以使用request.event变量检查当前请求的消息和数据参数,这对于事件处理程序外部的错误记录和调试很有用:

from flask import request

@socketio.on("my error event")
def on_my_event(data):
raise RuntimeError()

@socketio.on_error_default
def default_error_handler(e):
print(request.event["message"]) # "my error event"
print(request.event["args"])# (data,)

基于类的命名空间

作为上述基于装饰器的事件处理程序的替代,属于命名空间的事件处理程序可以创建为类的方法。flask_socketio.Namespace作为基类提供,用于创建基于类的命名空间:

from flask_socketio import Namespace, emit

class MyCustomNamespace(Namespace):
def on_connect(self):
pass

def on_disconnect(self):
pass

def on_my_event(self, data):
emit('my_response', data)

socketio.on_namespace(MyCustomNamespace('/test'))

使用基于类的命名空间时,服务器接收的任何事件都将调度到名为带有on_前缀的事件名称的方法。例如,事件my_event将由名为的方法处理on_my_event。如果收到的事件没有在命名空间类中定义的相应方法,则忽略该事件。基于类的命名空间中使用的所有事件名称必须使用方法名称中合法的字符。

为了方便在基于类的命名空间中定义的方法,命名空间实例包括类中的几个方法的版本,flask_socketio.SocketIO当namespace没有给出参数时,这些方法 默认为正确的命名空间。

如果事件在基于类的命名空间中具有处理程序,并且还有基于装饰器的函数处理程序,则仅调用修饰的函数处理程序。

测试

以上是作为官网文档的翻译,下面来说说写完了代码之后,应该怎么来调试。

script>

var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('connect', function() {
socket.emit('my event', {data: 'I'm connected!'});
});
script>

使用 JavaScript 来连接服务端,这里说一个我遇到的问题,最开始使用的是 jsbin 来测试,但怎么都连不到后端,原因就是 jsbin 是 HTTPS 的,而我的请求是 HTTP,于是还是老老实实写了一个 HTML 文件,源码可以直接在 Github 下载。




Flask-SocketIO Testtitle>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js">script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
namespace = '/test';
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

socket.on('connect', function() {
socket.emit('my_event', {data: 'I'm connected!'});
});

socket.on('my_response', function(msg) {
$('#log').append('
' + $('').text('Received #' + msg.count + ': ' + msg.data).html());
});

$('form#emit').submit(function(event) {
socket.emit('my_event', {data: $('#emit_data').val()});
return false;
});
});
script>
head>
<body>
<h2>Flask-SocketIO Testh2>
<p>Async mode is: <b>{{ async_mode }}b>p>
<h3>Send:h3>
<form id="emit" method="POST" action='#'>
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
<input type="submit" value="Echo">
form>
<h3>Receive:h3>
<div id="log">div>
body>
html></pre></code></p><p>有了这个页面之后,就可以直接在浏览器中输入 http://127.0.0.1:5000 访问服务端了,更多功能可以随意折腾。</p><p>以上就是“Flask-SocketIO如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。</p>            
            
                        <br>
            分享文章:Flask-SocketIO如何使用            <br>
            URL地址:<a href="http://lszwz.com/article/jjidjs.html">http://lszwz.com/article/jjidjs.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/decscio.html">王牌战争怎么更改区域名字 王牌战争怎么改名称</a>
                </li><li>
                    <a href="/article/decscdg.html">c语言求除的函数 c语言表示除</a>
                </li><li>
                    <a href="/article/decscoj.html">ensp怎么ping域名 ensp如何配置ip</a>
                </li><li>
                    <a href="/article/decscod.html">斐波那契算法代码java java实现斐波那契算法</a>
                </li><li>
                    <a href="/article/decsces.html">bp神经网路java代码 bp神经网络java</a>
                </li>        </ul>
    </div>
</div>
<div class="f_service_con">
    <div class="h_fumin">
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service01.png"></div>
            <p>售后响应及时</p><span>7×24小时客服热线</span>
        </div>
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service02.png"></div>
            <p>数据备份</p><span>更安全、更高效、更稳定</span>
        </div>
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service03.png"></div>
            <p>价格公道精准</p><span>项目经理精准报价不弄虚作假</span>
        </div>
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service04.png"></div>
            <p>合作无风险</p><span>重合同讲信誉,无效全额退款</span>
        </div>
    </div>
</div>
<div class="footerbar">
    <div class="footer-t">
        <div class="f-box">
            <div class="f-1">
                <div class="f-t">
                    <h2>联系我们</h2>
                    <span>TEL</span>
                </div>
                <div class="f-b">
                    <h1><a href="tel:13518219792" rel="nofollow">135-1821-9792</a></h1>
                    <h1><a href="tel:028-86922220" rel="nofollow">028-86922220</a></h1>
                    <p>地址:乐山市太升南路288号锦天国际</p>

                </div>
            </div>
            <div class="f-2">
                <div class="f-t">
                    <h2>快捷导航</h2>
                    <span>Shortcut</span>
                </div>
                <div class="f-b">
                    <ul >
                    </ul>
                    <ul >
                        <li><a href="/jianshe" title="乐山网站建设">乐山网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox2" title="品牌网站建设">品牌网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox1" title="企业网站建设">企业网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox4" title="集团网站建设">集团网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox4_2" title="外贸网站建设">外贸网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox4_5" title="企业宣传视频">企业宣传视频</a></li>
                    </ul>
                    <ul >
                        <li><a href="/weixin" title="微信开发">微信开发</a></li>
                        <li><a href="/weixin#item1" title="公众号开发">公众号开发</a></li>
                        <li><a href="/weixin#item2" title="微商城建设">微商城建设</a></li>
                        <li><a href="/weixin#item3" title="微官网建设">微官网建设</a></li>
                        <li><a href="/weixin#item4" title="小程序开发">小程序开发</a></li>
                    </ul>
                    <ul>
                        <li><a href="/case/" title="网站作品案例">网站作品案例</a></li>
                        <li><a href="/case/" title="品牌网站案例">品牌网站案例</a></li>
                        <li><a href="/case/" title="集团网站案例">集团网站案例</a></li>
                        <li><a href="/case/" title="企业网站案例">企业网站案例</a></li>
                        <li><a href="/case/" title="外贸网站案例">外贸网站案例</a></li>
                        <li><a href="/case/" title="营销网站案例">营销网站案例</a></li>
                    </ul>
                    <ul style="margin:0;">
                        <li><a href="/about/">小谭建站</a></li>
                        <li><a href="/about/">公司简介</a></li>
                        <li><a href="/about#ab_item3">企业文化</a></li>
                        <li><a href="/contact">联系我们</a></li>
                        <li><a href="/Pay.html">付款方式</a></li>
                        <li><a href="/jianshe#ym_websiteBox8">售后服务</a></li>
                    </ul>
                    <div style="clear:both;"></div>
                </div>
            </div>
            <div class="f-3">
                <div class="f-t">
                    <h2>二维码</h2>
                    <span>QR CODE</span>
                </div>
                <div class="f-b">
                    <ul>
                        <li><img src="/Public/Home/images/fewm.png">
                            <p>微信公众号</p>
                        </li>
                        <li style="margin: 0"><img src="/Public/Home/images/fewm2.png">
                            <p>手机端网站</p>
                        </li>
                        <div style="clear:both;"></div>
                    </ul>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="footer-about">
        <div class="w1200">乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发,<a href="/" target="_blank">乐山网站建设</a>,<a
                href="/jianshe" target="_blank">乐山网站设计</a>,<a href="/jianshe" target="_blank">乐山网页设计</a>,<a
                href="/jianshe" target="_blank">乐山网站制作</a>,<a href="/jianshe#ym_websiteBox2"
                                                              target="_blank">品牌网站建设</a>,<a href="/jianshe#ym_websiteBox3" target="_blank">营销网站建设</a>,<a
                href="/jianshe#ym_websiteBox4" target="_blank">集团网站建设</a>,<a href="/jianshe#ym_websiteBox1"
                                                                             target="_blank">企业网站建设</a>,<a href="/jianshe#ym_websiteBox4_2" target="_blank">外贸网站建设</a>,<a
                href="/jianshe#ym_websiteBox4_3" target="_blank">响应式网站建设</a>,<a href="/weixin#item4"
                                                                                target="_blank">小程序开发</a>,<a href="/weixin" target="_blank">微信开发</a>,<a
                href="/jianshe#ym_websiteBox4_4" target="_blank">企业形象设计</a>,<a href="/jianshe#ym_websiteBox4_5"
                                                                               target="_blank">企业宣传视频</a>等服务,小谭建站位于乐山市龙岗区大运软件小镇,小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员,具备各种规模与类型网站建设的雄厚实力,在网站建设领域树立了自己独特的设计风格。
        </div>
        <div class="friend-links">
            <h6 class="clearfix">
                <span class="tilte">友情链接</span>
                <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a>
            </h6>
            <div class="link-list clearfix">
                <div class="link-slider">
                    <a href="http://www.cxjianzhan.com/mobile/" title="手机网站建设公司" target="_blank">手机网站建设公司</a>   <a href="http://www.idckuai.cn/" title="网站空间" target="_blank">网站空间</a>   <a href="http://www.xywzsj.com/" title="钢筋机械设备" target="_blank">钢筋机械设备</a>   <a href="http://www.xhgfhy.com/" title="犀浦防纹窗" target="_blank">犀浦防纹窗</a>   <a href="http://www.sczizhong.com/" title="资中网站建设" target="_blank">资中网站建设</a>   <a href="http://www.cdhuace.com/faguangzi/bfg.html" title="亚克力背部发光字" target="_blank">亚克力背部发光字</a>   <a href="http://m.cdcxhl.cn/applets/
" title="小程序开发公司" target="_blank">小程序开发公司</a>   <a href="http://www.kswsj.com/" title="成都制作网站" target="_blank">成都制作网站</a>   <a href="http://www.scaimingsi.com/" title="四川艾名斯" target="_blank">四川艾名斯</a>   <a href="http://www.75109.cn/" title="精灵网" target="_blank">精灵网</a>                   </div>
            </div>
        </div>
    </div>
    <div class="footer-b">
        <div class="f-box">
            <ul>
                <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li>
                <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li>
                <li><a href="/about/" target="_blank">联系我们</a></li>
                <li><a href="#" target="_blank">付款方式</a></li>
                <li><a href="#" target="_blank">网站地图</a></li>
                <li><a href="#" target="_blank">sitemap</a></li>
                <li>
                    <p>
                        <script data-cfasync="false" src="/Public/Home/js/email-decode.min.js"></script>
                    </p>
                </li>
                <div style="clear:both;"></div>
            </ul>
            <p class="copy">Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2021004003号-25</a>
                <a style="display:none" target="_blank" href="###"><img style="vertical-align:middle" border="0" src="" width="65" height="25" /></a>

            </p>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="sj_footer">
        <div class="f-box">
            <ul>
                <li><a href="/jianshe" target="_blank">网站建设</a></li>
                <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li>
                <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li>
                <li><a href="#" target="_blank">付款方式</a></li>
                <li><a href="/about/" target="_blank">关于我们</a></li>
                <li><a href="#" target="_blank">网站地图</a></li>
                <div style="clear:both;"></div>
            </ul>
            <p class="copy">Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 </p>
            <p class="copy"> <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2021004003号-25</a>  <a
                    href="###" target="_blank"><img src="/Public/Home/images/govicon.gif" width="20" height="28" border="0" style="border-width:0px;border:hidden; border:none;"></a></p>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>
<script type='text/javascript' src='/Public/Home/js/qqkefu.js'></script>
<div class="qqkefu">
    <ul>
        <li class="qq_czaa" id="130"><b class="a"></b>135-1821-9792</li>
        <li class="qq_czaa" id="130"><a href="tencent://message/?uin=1683211881"><b class="b"></b>业务咨询QQ</a></li>
        <li class="qq_czaa" id="130"><a href="javascript:showDiv()"><b class="f"></b>提交合作意向表</a></li>
        <li class="qq_czb">
            <b class="c"></b>
            <div class="erweima">
                <p><img src="/Public/Home/images/right_erweima.png"></p>
            </div>
        </li>
        <li class="top"><span></span></li>
    </ul>
</div>
<div id="popDiv" class="mydiv" style="display:none;">
    <a class="mydiv_clk" href="javascript:closeDiv()">X</a>
    <div class="mydiv_list">
        <div class="c_f_title"><span class="c_f_t">合作意向表</span></div>
        <div class="c_f_con">
            <form id="form1" name="form1" class="mess_form" method="post" action="/post_order">
                <input name='enews' type='hidden' value='AddFeedback'>
                <input name="bid" value="1" type="hidden">
                <input type="hidden" name="ecmsfrom" value="9">
                <input type="hidden" name='title' value="客户提交需求">
                <li class="c_n"><span>公司名称</span>
                    <dl><input name='gsname' id='gsname' type="text"></dl>
                </li>
                <li class="c_n"><span>邮箱</span>
                    <dl><input name='gemail' id='gemail' type="text"></dl>
                </li>
                <li class="c_n xmm">
                    <div class="xmm_01"><span>姓名</span>
                        <dl class="c_n_i"><input name='name' id='name' type="text"></dl>
                    </div>
                    <div class="xmm_01"><span style="text-align:center">电话</span>
                        <dl class="c_n_i"><input name="tel" type="text"></dl>
                    </div>
                </li>
                <li class="c_tser">您需要的服务</li>
                <li class="clearfix">
                    <dd><label><input type="radio" name='hobby' id='hobby' value="高端网站建设"><span>高端网站建设</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做微信营销"><span>我需要做微信营销</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="要找长期合作,需要年度服务"><span>要找长期合作,需要年度服务</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做购物商城"><span>我需要做购物商城</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="我需要网站改版"><span>我需要网站改版</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="其他"><span>其他</span></label></dd>
                </li>
                <li class="c_tser">您关注的地方</li>
                <li class="clearfix">
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="对功能要求比较高"><span>对功能要求比较高</span></label></dd>
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="对设计创意要求比较高"><span>对设计创意要求比较高</span></label></dd>
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="需要可以购物支付"><span>需要可以购物支付</span></label></dd>
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="搜索引擎排名"><span>搜索引擎排名</span></label></dd>
                </li>
                <li class="c_tser">预算</li>
                <li class="clearfix clearfix2">
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="一万以内"><span>一万以内</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="1-3万"><span>1-3万</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="3-5万"><span>3-5万</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="5万以上"><span>5万以上</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="需招投标"><span>需招投标</span></label>
                    </dd>
                </li>
                <li class="c_n" style="border-top:1px solid #eee; padding-top:10px"><span>验证码</span>
                    <dl class="c_n_i yzmm"><input type="text" name='code' id='code' value=""></dl><span
                            style="text-align:center"><img src="/Public/Home/images/1661eb19783442c38063791555cd0d80.gif"
                                                           onclick="this.src=this.src + '?'" width="100" height="40"></span>
                </li>
                <li class="clearfix">
                    <dd class="submit"><input name='submit' type="submit" value="提交需求"></dd>
                </li>
            </form>
        </div>
    </div>
</div>
<div id="bg" class="bg" style="display:none;"></div>
<div id='popIframe' class='popIframe' frameborder='0'></div>
<script>
    //提交需求选项
    $(document).ready(function (e) {
        $(".mess_form").submit(function () {
            if ($("#gsname").val() == "") {
                alert("请填写您的公司名称!");
                $("#gsname").focus();
                return false;
            }
            if ($("#gemail").val() == "") {
                alert("请填写您的邮箱");
                $("#gemail").focus();
                return false;
            }
            if ($("#name").val() == "") {
                alert("请填写您的姓名!");
                $("#name").focus();
                return false;
            }
            if ($("#tel").val() == "") {
                alert("请填写您的电话!");
                $("#tel").focus();
                return false;
            }
            if ($("#hobby").val() == "") {
                alert("请选择您需要的服务!");
                $("#hobby").focus();
                return false;
            }
            if ($("#hobby2").val() == "") {
                alert("请选择您关注的地方!");
                $("#hobby2").focus();
                return false;
            }
            if ($("#hobby3").val() == "") {
                alert("请选择您的预算!");
                $("#hobby3").focus();
                return false;
            }
            if ($("#code").val() == "") {
                alert("请填写正确的验证码!");
                $("#code").focus();
                return false;
            }
        });
    });
</script>
<script language="javascript" type="text/javascript">
    //提交需求窗口
    function showDiv() {
        document.getElementById('popDiv').style.display = 'block';
        document.getElementById('popIframe').style.display = 'block';
        document.getElementById('bg').style.display = 'block';
    }
    function closeDiv() {
        document.getElementById('popDiv').style.display = 'none';
        document.getElementById('bg').style.display = 'none';
        document.getElementById('popIframe').style.display = 'none';
    }
</script>
<script type="text/javascript" src="/Public/Home/js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="/Public/Home/js/su_new.js"></script>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>