基于WebSocket的简易聊天室
用的是Flash + WebSocket 哦~
一、项目结构：
二、导入模块
pip3 install gevent-websocket
三、先来看一个一对一聊天的代码
from flask import Flask, request, render_template
from geventwebsocket.websocket import WebSocket
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer import json # 创建 flask 对象
app = Flask(__name__) # 跳转到所需 websocket 页面的视图函数
@app.route('/one-to-one')
def one_to_one_page():
return render_template('one_to_one.html') # 用来存放一对一聊天用户的连接 格式： {用户名 ： 连接对象, ...}
one_to_one_user_dict = {} # 一对一聊天
@app.route('/one-to-one/<username>')
def one_to_one(username):
# 获取连接通道
user_socket = request.environ.get('wsgi.websocket')
if not user_socket:
return '请使用websocket连接 '
print(user_socket)
one_to_one_user_dict[username] = user_socket
while True:
try:
user_msg_json = user_socket.receive()
user_msg = json.loads(user_msg_json)
print(user_msg)
# 如果发给的用户已连接，则发消息给对象
if user_msg['to_user'] in one_to_one_user_dict:
user_msg['code'] = True
one_to_one_user_dict[user_msg['to_user']].send(json.dumps(user_msg))
# 否则返回错误信息
else:
msg = {
'code': False,
'msg': '用户未登录',
}
user_socket.send(json.dumps(msg)) except Exception as e:
# 如果当前用户异常 将其从连接字典中删除
if username in one_to_one_user_dict:
one_to_one_user_dict.pop(username)
print(e)
break if __name__ == '__main__':
# 创建 wsgi server
http_serv = WSGIServer(('0.0.0.0', 9527), app, handler_class=WebSocketHandler)
# 持续运行 server
http_serv.serve_forever()
在 one_to_one.html 页面里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
#content {
width: 100%;
height: 200px;
background-color: #e4e4e4;
}
#input {
width: 100%;
height: 50px;
}
.login {
margin: 15px 0;
}
.self_info {
color: #1004ff;
}
.self {
margin-left: 100px;
}
.friend_info {
color: red; }
.friend {
margin-right: 100px;
}
.friend_msg, .self_msg {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="login">
<div class="form-inline">
<label for="in_login">用户名</label>
<input id="in_login" type="text" class="form-control" placeholder="用户名"> <label for="friend_name">好友名称</label>
<input id="friend_name" type="text" class="form-control" placeholder="好友名称"> <button id="b_login" type="submit" class="btn btn-default">Sign in</button>
</div>
</div> <div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
聊天室
</div>
<div id="content" class="panel-body">
<div class="friend_msg clearfix hide" >
<div class="pull-left friend">
<span class="friend_user">对方：</span>
<span class="friend_info"> 你好！ </span>
</div>
</div>
<div class="self_msg clearfix hide">
<div class=" pull-right self">
<span class="self_info"> 你好 </span>
<span class="self_user"> : 我</span>
</div>
</div>
</div>
</div> <div id="input">
<textarea id="input-info" class="form-control" rows="3"></textarea>
<input id="submit" class="btn btn-default" type="submit" value="Submit">
</div>
</div>
</div>
</div> </body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="application/javascript">
var ws_url = 'ws://127.0.0.1:9527/one-to-one/';
var ws = null;
{#var ws = new WebSocket('ws://127.0.0.1:9527/ws');#}
{#ws.onopen = function () {#}
{#ws.send('qweqwe')};#} //用户登录名
var login_user
var friend_name //登录：
$('#b_login').click(function () {
var user = $('#in_login').val();
var friend = $('#friend_name').val();
console.log('user', user);
if (! (user && friend) ) {
alert('用户或好友不能为空！！！')
} else {
login_user = user
friend_name = friend
console.log(ws_url + login_user);
ws = new WebSocket(ws_url + login_user); //接收信息
ws.onmessage = function (serv_msg) {
serv_msg = JSON.parse(serv_msg.data)
console.log('******secv********',serv_msg)
if (serv_msg['code']){
var friend_info = serv_msg['send_msg'];
var friend_user = serv_msg['send_user'];
create_friend_msg(friend_info, friend_user)
}else {
alert(serv_msg['msg'])
} };
}
}); //发送信息
$('#submit').click(function () {
var input_info = $('#input-info').val();
var send_msg_json = {
send_user: login_user,
to_user: friend_name,
send_msg: input_info
};
ws.send(JSON.stringify(send_msg_json));
console.log(JSON.stringify(send_msg_json));
create_self_msg(input_info);
$('#input-info').val('');
}); //创建发出信息的标签
function create_self_msg(input_info) {
var $self_msg = $('.self_msg').first().clone();
$self_msg.find('.self_info').text(input_info);
$self_msg.find('.self_user').text(' : ' + login_user);
$('#content').append($self_msg);
}; //创建收到信息的标签
function create_friend_msg(friend_info, friend_user) {
var $self_msg = $('.friend_msg').first().clone();
$self_msg.find('.friend_info').text(friend_info);
$self_msg.find('.friend_user').text(friend_user + ' : ');
$('#content').append($self_msg);
}; </script>
</html>
one_to_one.html
重点看其中的 script
<script type="application/javascript">
var ws_url = 'ws://127.0.0.1:9527/one-to-one/';
var ws = null;
{#var ws = new WebSocket('ws://127.0.0.1:9527/ws');#}
{#ws.onopen = function () {#}
{#ws.send('qweqwe')};#} //用户登录名
var login_user
var friend_name //登录：
$('#b_login').click(function () {
var user = $('#in_login').val();
var friend = $('#friend_name').val();
console.log('user', user);
if (! (user && friend) ) {
alert('用户或好友不能为空！！！')
} else {
login_user = user
friend_name = friend
console.log(ws_url + login_user);
ws = new WebSocket(ws_url + login_user); //接收信息
ws.onmessage = function (serv_msg) {
serv_msg = JSON.parse(serv_msg.data)
console.log('******secv********',serv_msg)
if (serv_msg['code']){
var friend_info = serv_msg['send_msg'];
var friend_user = serv_msg['send_user'];
create_friend_msg(friend_info, friend_user)
}else {
alert(serv_msg['msg'])
}
};
}
}); //发送信息
$('#submit').click(function () {
var input_info = $('#input-info').val();
var send_msg_json = {
send_user: login_user,
to_user: friend_name,
send_msg: input_info
};
ws.send(JSON.stringify(send_msg_json));
console.log(JSON.stringify(send_msg_json));
create_self_msg(input_info);
$('#input-info').val('');
}); //创建发出信息的标签
function create_self_msg(input_info) {
var $self_msg = $('.self_msg').first().clone();
$self_msg.find('.self_info').text(input_info);
$self_msg.find('.self_user').text(' : ' + login_user);
$('#content').append($self_msg);
}; //创建收到信息的标签
function create_friend_msg(friend_info, friend_user) {
var $self_msg = $('.friend_msg').first().clone();
$self_msg.find('.friend_info').text(friend_info);
$self_msg.find('.friend_user').text(friend_user + ' : ');
$('#content').append($self_msg);
}; </script>
看看结果，个人感觉 还是没那么丑，有点样子的， 哈哈哈。。。
四、那多人聊天室：
app.py文件里的哦~
# 用来存放多人聊天用户的连接 格式： {用户名 ： 连接对象, ...}
conn_user_dict = {}
# 多人聊天室 群聊
@app.route('/ws/<username>')
def ws(username):
# 获取连接通道
user_socket = request.environ.get('wsgi.websocket')
if not user_socket:
return '请使用websocket连接 '
conn_user_dict[username] = user_socket
while True:
try:
user_msg_json = user_socket.receive()
user_msg = json.loads(user_msg_json)
# 遍历连接对象字典
for i in conn_user_dict:
# 如果不是当前连接发送来的消息，就将消息发送给该连接对象
if not i == user_msg['send_user']:
conn_user_dict[i].send(user_msg_json)
except Exception as e:
if username in conn_user_dict:
conn_user_dict.pop(username)
print(e)
break
ws.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
#content {
width: 100%;
height: 200px;
background-color: #e4e4e4;
} #input {
width: 100%;
height: 50px;
} .login {
margin: 15px 0;
} .self_info {
color: #1004ff; } .self {
margin-left: 100px;
} .friend_info {
color: red; } .friend {
margin-right: 100px;
} .friend_msg, .self_msg {
width: 100%;
} </style> </head>
<body>
<div class="container">
<div class="login">
<div class="form-inline">
<label for="in_login">用户名</label>
<input id="in_login" type="text" class="form-control" placeholder="用户名">
<button id="b_login" type="submit" class="btn btn-default">Sign in</button>
</div>
</div> <div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
聊天室
</div>
<div id="content" class="panel-body">
<div class="friend_msg clearfix">
<div class="pull-left friend">
<span class="friend_user">对方：</span>
<span class="friend_info"> 你好！ </span>
</div>
</div>
<div class="self_msg clearfix">
<div class=" pull-right self">
<span class="self_info"> 你好 </span>
<span class="self_user"> : 我</span>
</div>
</div>
</div>
</div> <div id="input">
<textarea id="input-info" class="form-control" rows="3"></textarea>
<input id="submit" class="btn btn-default" type="submit" value="Submit">
</div>
</div>
</div>
</div> </body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="application/javascript">
var ws_url = 'ws://127.0.0.1:9527/ws/';
var ws = null;
{#var ws = new WebSocket('ws://127.0.0.1:9527/ws');#}
{#ws.onopen = function () {#}
{#ws.send('qweqwe')};#} //用户登录名
var login_user //登录：
$('#b_login').click(function () {
var user = $('#in_login').val();
console.log('user', user);
if (!user) {
alert('用户名不能为空！！！')
} else {
login_user = user
console.log(ws_url + login_user);
ws = new WebSocket(ws_url + login_user); //接收信息
ws.onmessage = function (serv_msg) {
serv_msg = JSON.parse(serv_msg.data)
console.log('******secv********',serv_msg)
var friend_info = serv_msg['send_msg'];
var friend_user = serv_msg['send_user'];
create_friend_msg(friend_info, friend_user)
};
}
}); //发送信息
$('#submit').click(function () {
var input_info = $('#input-info').val();
var send_msg_json = {
send_user: login_user,
send_msg: input_info
};
ws.send(JSON.stringify(send_msg_json));
console.log(JSON.stringify(send_msg_json));
create_self_msg(input_info);
$('#input-info').val('');
}); //创建发出信息的标签
function create_self_msg(input_info) {
var $self_msg = $('.self_msg').first().clone();
$self_msg.find('.self_info').text(input_info);
$self_msg.find('.self_user').text(' : ' + login_user);
$('#content').append($self_msg);
}; //创建收到信息的标签
function create_friend_msg(friend_info, friend_user) {
var $self_msg = $('.friend_msg').first().clone();
$self_msg.find('.friend_info').text(friend_info);
$self_msg.find('.friend_user').text(friend_user + ' : ');
$('#content').append($self_msg);
}; </script>
</html>
ws.html
基于WebSocket的简易聊天室的更多相关文章
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 分享基于 websocket 网页端聊天室
博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...
- workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- node.js+websocket实现简易聊天室
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...
- node+websocket创建简易聊天室
关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...
- .NET Core 基于Websocket的在线聊天室
什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后 ...
- 使用Html5下WebSocket搭建简易聊天室
一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...
- Netty 系列八（基于 WebSocket 的简单聊天室）.
一.前言 之前写过一篇 Spring 集成 WebSocket 协议的文章 —— Spring消息之WebSocket ,所以对于 WebSocket 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...
随机推荐
- 手把手带你基于嵌入式Linux移植samba服务
摘要:Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成. 本文分享自华为云社区<嵌入式Linux下移植samba服务--<基于北斗和4G ca ...
- TensorFlow优化器浅析
本文基于tensorflow-v1.15分支,简单分析下TensorFlow中的优化器. optimizer = tf.train.GradientDescentOptimizer(learning_ ...
- Java基于ClassLoder/ InputStream 配合读取配置文件
阅读java开源框架源码或者自己开发系统时配置文件是一个不能忽略的,在阅读开源代码的过程中尝尝困惑配置文件是如何被读取到内存中的.配置文件本身只是为系统运行提供参数的支持,个人阅读源码时重点不大可能放 ...
- Java并发基础之Compare And Swap/Set(CAS)
什么是 CAS?CAS(Compare And Swap/Set)比较并交换, CAS 算法的过程是这样:它包含 3 个参数CAS(V,E,N). V 表示待更新的变量(内存值), E 表示预期值(旧 ...
- 微服务从代码到k8s部署应有尽有系列（十四、部署环境搭建）
我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 整个项目使用了go-zero开发的微服务,基本包含了go-zero以及相关go-zero作者开发的一些中 ...
- LibOpenCM3(五) 基础功能: 系统时钟, GPIO, 定时器
目录 LibOpenCM3(一) Linux下命令行开发环境配置 LibOpenCM3(二) 项目模板 Makefile分析 LibOpenCM3(三) .ld文件(连接器脚本)和startup代码说 ...
- 01_描述对象_类图（Class Diagram）
1. 作用 用于面向对象软件开发的分析和设计阶段,描述系统的静态结构. 描述类与类.类与接口.接口与接口之间的静态结构和关系,描述系统的结构化设计.最基本的元素:类.接口. 用于应用程序的一般概念 ...
- 在windev中实现BS架构级的灵活排版
windev是CS架构,但却能够实现BS架构级的灵活排版.玩过CS架构的老铁们,感受应会都如我,如获新生!因为苦于没有一张好画皮久矣!在windev中,要实现灵活,专业,自适应和非常丰富的排版,可以关 ...
- 使用while循环和for循环输出2~100之间的素数（只能被1和自己整除的自然数）
不管是while循环还是for循环,原理都是取根号,循环到取根号后的数,至于为什么需要循环到开根后的数,我想主要是因为一个数的分解因子在开根号后的数向上取整以下吧. 话不多说,上代码: while循环 ...
- 【缓存】CPU高速缓存 之MESI 性协议 Gif 动画
CPU缓存架构 不同的CPU厂商的架构也有些不同,在这里只介绍流行的缓存架构 缓存一致性可以分为三个点: 在进程每个写入运算时都立刻采取措施保证资料一致性 每个独立的运算,假如它造成资料值的改变,所有 ...