html实现网页多人聊天,实现websocket多人聊天,很简单(示例代码)
go?
房间号相同的人能聊天
Flask Server
# -*- coding: utf-8 -*-
from flask import Flask, render_template
from flask_socketio import SocketIO, rooms
app = Flask(__name__)
app.config[‘SECRET_KEY‘] = ‘sldjfalsfnwlemnw‘
socketio = SocketIO(app)
@app.route(‘/chats/‘)
def index(room_id):
return render_template(‘chat.html‘, room_id=room_id)
@socketio.on(‘chat_send‘)
def chat_send(json):
print ‘chat_send: ‘, str(json)
room_id = None
if json.get(‘room_id‘, None):
room_id = json[‘room_id‘]
socketio.emit(‘chat_recv_{room_id}‘.format(room_id=room_id), json)
if __name__ == ‘__main__‘:
socketio.run(app, host=‘0.0.0.0‘, port=8080, debug=True)
templates/chat.html
Python Chat App Yo
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
div.msg_bbl {
background-color: #ddd;
padding: 5px 10px;
border-radius: 10px;
color: #555;
margin-bottom: 5px;
}
没有任何消息..
输入你的消息并发送
Send
// 1. 监听connect事件
var socket = io.connect(‘http://‘ + document.domain + ‘:‘ + location.port);
socket.on(‘connect‘, function () {
var form = $(‘form‘).on(‘submit‘ ,function (e) {
e.preventDefault();
// 1.1 获取对象
let user_name = $(‘input.username‘).val();
let message = $(‘input.message‘).val();
// 1.2 发送数据到socket服务器
socket.emit(‘chat_send‘, {
room_id : {{ room_id }} ,
username : user_name,
message : message
});
$(‘input.message‘).val(‘‘).focus();
});
});
// 2. 监听response事件,服务器返回数据,并更新数据
socket.on(‘chat_recv_{{ room_id }}‘, function (data) {
// 数据发送到聊天框
console.log(data);
$(‘h1‘).remove();
let text = ‘
‘;
$(‘div.message_holder‘).append(text);
});
example:
ISSUE
走Reids 队列时hang住
房间号socket.io 没找到函数原型,不知道怎么调,走了个取巧的方式。
html实现网页多人聊天,实现websocket多人聊天,很简单(示例代码)相关推荐
- 如何用html5实现网页聊天,HTML5 WebSocket实现点对点聊天的示例代码
HTML5的websocket与Tomcat实现了多人聊天,那是最简单也是最基本的,其中注意的就是开发环境,要满足jdk1.7和tomcat8,当然了tom7的7.063也行,在网站上找到了用goog ...
- php ws聊天,php+websocket实现在线聊天室
熟悉web开发的朋友明白,平时我们与服务端的数据请求都是基于HTTP协议,而HTTP协议,通信请求只能由客户端发起,服务端对请求做出应答处理.也就是说服务端不能主动向我们推送数据,而像即时通讯这类应用 ...
- python开发qq聊天机器人_Python qqbot 实现qq机器人的示例代码
qqbot 是一个用 python 实现的.基于腾讯 SmartQQ 协议的 QQ 机器人框架,可运行在 Linux . Windows 和 Mac OSX 平台下. 你可以通过扩展 qqbot 来实 ...
- php网页采集器 源码,PHP采集器的简单示例代码
复制代码 代码示例: #zs#* * 采集器代码一例 * by www.jbxue.com #fzs# $url = "http://book.sina.com.cn/nzt/lit/zhu ...
- 网页向女朋友/老婆告白和纪念日专用特效,很简单的程序,贵在有心和精美
不多废话,直接上代码,效果和源代码js等文件随后附上! <%@ Page Language="C#" AutoEventWireup="true" Cod ...
- 记录一次操蛋,恶心,草率的面试经历!(面试官总是说,这个很简单啊,那个很简单啊,卧槽,企业中从来不缺乏说大话,吹牛皮的人!)
记得是去年2019年9月份的时候,我去一家企业面试,在深圳南山区深大地铁站那边,对我而言,有点远,屁颠屁颠的坐地铁过去了,坐了将近一个小时的时间.面试时间不超过10分钟,对,没错,面试10分 ...
- rudesocket如何使用_[WebSocket入门]手把手搭建WebSocket多人在线聊天室(SpringBoot+WebS...
前言 本文中搭建了一个简易的多人聊天室,使用了WebSocket的基础特性. 源代码来自老外的一篇好文: 本文内容摘要: 初步理解WebSocket的前后端交互逻辑 手把手使用 SpringBoot ...
- socket.io php 聊天室,WebSocket学习(一)——基于socket.io实现简单多人聊天室
前言 什么是Websocket呢? 我们都知道在Http协议中,客户端与服务器端的通信是靠客户端发起请求,然后服务器端收到请求再进行回应,这个过程中,客户端是主动的,服务器端是被动的.Websocke ...
- Java websocket + redis 实现多人单聊天室,多人多聊天室, 一对一聊天
多人,单聊天室版 FEATURE 多人聊天, 界面简洁美观, 使用ueditor支持发送文字,图片信息 群聊成员列表, 登入登出公告 存储聊天记录, 查看历史消息 技术点 使用CopyOnWriteM ...
- Ratchet实现PHP WebSocket多人聊天功能的示例
composer 安装ratchet composer require cboden/ratchet 使用PDO连接数据库,创建mysql命令如下 CREATE TABLE messages (id ...
最新文章
- python连接mysql很慢 2.7_Python 2.7 学习笔记 访问mysql数据库
- 【学术快报】韩世辉课题组在《eLife》发表论文揭示群体冲突中复仇的神经生物学机制...
- Hibernate一对多(注解)
- 【设计模式】中介者模式 ( 简介 | 适用场景 | 优缺点 | 代码示例 )
- android 视频监控相关(打包下载)
- CentOS 7 搭建CA认证中心实现https取证
- tcpdump查看某个端口数据
- HDU6109 数据分割【并查集】
- 微控制器实验计算机组成原理,计算机组成原理(西安理工大学)实验二cpth模型机综合实验——微控制器实验.doc...
- 联想计算机无线网络设置密码,联想(Lenovo)路由器怎么设置密码?
- PIC单片机应用开发实践教程(四): MPLAB X IDE Debug
- sqlmap注入命令大全
- mysql mariadb libs_mysql 安装 【解决】mariadb-libs is obsoleted by *** - Ctrl+CCtrl+V - ITeye博客...
- 幂指函数求导公式——备忘
- 复旦博士写了130行代码搞定核酸统计
- csgo调出参数_CSGO全参数设置
- Java笔记整理六(File类,递归,字节流IO,字符流IO,流中的异常处理,属性集Properties,缓冲流,转换流,序列化,打印流)
- 纽约时报:雅虎财经远远超越 Google 财经
- mysql备份数据库怎么还原数据库文件_mysql如何备份和还原数据库文件
- Android 之dragger使用
热门文章
- MarkdownPad2行内公式如何用`$$`替代`\\(\\)`---MathJax风格化配置
- PHP检查日期格式是否符合
- 绿色环保静态网页设计
- k8s [kubelet-check] Initial timeout of 40s passed.解决方案
- 世界五大黑客:代码创造他们,他们改变世界!
- 继Python之后,Go也顺利在浏览器上运行
- 如何查看征信报告上的不良信息?
- 鸿鹄系统和鸿蒙系统的区别,华为鸿蒙系统和全新的鸿鹄处理器将于8月9日正式发布,荣耀首发...
- 杀毒软件会从哪些方面对计算机进行保护作用(360杀毒软件)
- java oa系统二次开发_浅谈OA系统的二次开发