前期没有来得及好好总结,现在复习总结一下:

Socket.IO 背后主要的思想是你可以发送和接收想要的任何事件,携带你想要的任何数据。任何可以编码为 JSON 的对象都可以做到,并且也支持二进制数据。

1.Express 初始化 app 作为功能处理器,你可以将它传给 HTTP 服务器。

2.定义一个路由处理器 / ,当我们访问网站主页时就会调用这个处理器。

3.HTTP 服务器监听端口 3000。

通过传递 http(HTTP 服务器)对象初始化了一个 socket.io 的新实例。然后为到来的 socket 监听 connection 事件,并且输入日志到控制台。

这将加载 socket.io-client,创建全局变量 io,并且连接

下一个目标是我们从服务器发送事件给其他用户。

为了发送事件给所有人,Socket.IO 给我们提供了 io.emit:

io.emit('some event', { for: 'everyone' });

如果你想发送一个确定 socket 的消息给所有人,我们有 broadcast 标识:

io.on('connection', function(socket){
socket.broadcast.emit('hi');
});

下面是参考:http://www.cnblogs.com/luozx207/p/9719597.html

 关于flask_socketio的入门可以看我的上一篇博客《使用flask_socketio实现服务端向客户端定时推送》

  用socketio实现即时通信十分简单,只需要客户端发送用户输入的信息到后端,后端再将此信息广播到所有连接到此命名域的客户端就可以了。

from flask import Flask, render_template
from flask_socketio import SocketIO,emit app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app) @app.route('/')
def index():
return render_template('index.html') @socketio.on('imessage', namespace='/test_conn')
def test_message(message):
emit('message',//后端广播信息的事件名最好跟前端发送信息的事件名不一样
{'data': message['data']},
broadcast=True) if __name__ == '__main__':
socketio.run(app, debug=True)

  关键就是要在emit中加broadcast=True这一项,如果不加,只有发送信息的客户端能收到消息

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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">
$(document).ready(function() {
namespace = '/test_conn';
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
       //连接后发送日志
socket.on('connect', function(){
console.log('connected')
});
       //点击发送时将text框的内容发送到后端
$('form#emit').submit(function(event) {
socket.emit('imessage', {data: $('#emit_data').val()});
return false;
});
       //接收后端广播的信息
socket.on('message', function(msg) {
$('#log').append('<br>' + $('<div/>').text(msg.data).html());
});
});
</script>
</head>
<body>
<form id="emit" method="POST" action='#'>
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
<input type="submit" value="发送">
</form>
<h2>Receive:</h2>
<div id="log"></div>
</body>
</html>

  打开两个网页都连接到http://127.0.0.1:5000/,测试一下,一个网页发送的信息在另一个网页也可以及时收到。一个简陋的多人聊天系统完成了:)

 
 
 
 

使用flask_socketio实现客户端间即时通信的更多相关文章

  1. 基于XMPP协议的Android即时通信系

    以前做过一个基于XMPP协议的聊天社交软件,总结了一下.发出来. 设计基于开源的XMPP即时通信协议,采用C/S体系结构,通过GPRS无线网络用TCP协议连接到服务器,以架设开源的Openfn'e服务 ...

  2. 即时通信WebSocket 和Socket.IO

    WebSocket HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯. 在2008年诞生,2011年成为国际标准. 现在基本所有浏览器都已经支持了. We ...

  3. (转)基于即时通信和LBS技术的位置感知服务(三):搭建Openfire服务器+测试2款IM客户端

    主要包含4个章节: 1. Java 领域的即时通信的解决方案 2. 搭建 Openfire 服务器 3. 使用客户端测试我们搭建的 Openfire 服务器 4. Smack 和 ASmack 一.J ...

  4. QQ 腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件

    QQ 编辑 腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件.腾讯QQ支持在线聊天.视频通话.点对点断点续传文件.共享文件.网络硬盘.自定义面板.QQ邮箱等多种功 ...

  5. (转)基于即时通信和LBS技术的位置感知服务(二):XMPP协议总结以及开源解决方案

    在<基于即时通信和LBS技术的位置感知服务(一):提出问题及解决方案>一文中,提到尝试使用XMPP协议来实现即时通信.本文将对XMPP协议框架以及相关的C/S架构进行介绍,协议的底层实现不 ...

  6. WEB即时通信

    问题 传统的浏览器通信方式:基于HTTP协议的请求/响应模式. 早期:通过刷新浏览器来更新服务器端的数据 后来Ajax(XMLHttpRequest是核心):可以不用刷新浏览器更新服务器端数据.但是这 ...

  7. WebSocket实现Web端即时通信

    前言 WebSocket 是HTML5开始提供的一种在浏览器和服务器间进行全双工通信的协议.目前很多没有使用WebSocket进行客户端服务端实时通信的web应用,大多使用设置规则时间的轮询,或者使用 ...

  8. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  9. iOS开发之使用XMPPFramework实现即时通信(三)

    你看今天是(三)对吧,前面肯定有(一)和(二),在发表完iOS开发之使用XMPPFramework实现即时通信(一)和iOS开发之使用XMPPFramework实现即时通信(二)后有好多的小伙伴加我Q ...

随机推荐

  1. 【洛谷P3901】数列找不同

    题目大意:给定一个长度为 N 的序列,每个点被染了一个颜色.现有 M 个询问,每个询问查询区间 [l,r] 内的点是否颜色都是不同的. 题解:莫队裸题. 直接维护区间颜色数,用 cnt[] 记录下区间 ...

  2. Educational Codeforces Round 53 (Rated for Div. 2) A Diverse Substring

    传送门 https://www.cnblogs.com/violet-acmer/p/10163375.html 题意: 给出串是多态的定义“长度为 n 的串 s ,当串 s 中所有字母出现的次数严格 ...

  3. POJ 2987 Firing (最大权闭合图)

    Firing Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 12108   Accepted: 3666 Descript ...

  4. Failed to execute aapt:Process 'command '/build-tools/28.0.2/aapt'' finished with non-zero exit value 1

    Caused by: com.android.ide.common.process.ProcessException: Error while executing process /Users/hou ...

  5. 彻底删除与安装MySQL

    一.下载msi安装版:https://dev.mysql.com/downloads/mysql/ 二.安装前一定要彻底删除已有的MySQL:(从未安装过,忽略此步) 1.计算机处右键快捷菜单,管理, ...

  6. GD32 ------ 使用外部中断,中断函数需要延时才能读到真正电平

    MCU:GD32F103RCT6 中断引脚没有外界上拉电阻 中断配置如下: RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC|RCC_APB2Periph_AFI ...

  7. Go strings.Builder

    Go strings.Builder 字符串拼接操作优化 最开始的时候,可能会使用如下的操作: package main func main() { ss := []string{ "sh& ...

  8. flume常见异常汇总以及解决方案

    flume常见异常汇总以及解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 实际生产环境中,我用flume将kafka的数据定期的往hdfs集群中上传数据,也遇到过一系列的坑 ...

  9. kafka命令使用

    1.创建 topic /usr/local/kafka/bin/kafka-topics.sh --create --zookeeper zoo1:2181,zoo2:2181,zoo3:2181 - ...

  10. C语言复习---输出魔方阵

    一:奇魔方阵 算法: 1.第一个元素放在第一行中间一列 .下一个元素存放在当前元素的上一行.下一列. .如果上一行.下一列已经有内容,则下一个元素的存放位置为当前列的下一行. 在找上一行.下一行或者下 ...