基于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 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...
随机推荐
- 踩坑系列-Java Calendar
Calendar是Java util包下的日期Api,其中获取月份是当前月份-1 public class Demo { public static void main(String[] args) ...
- OSI七层协议&TCP协议（三次握手四次挥手）
今日内容 python 基础回顾 软件开发架构 网络理论前戏 OSI 七层协议(五层) TCP协议 三次握手与四次挥手 UDP协议 内容详细 一.python 基础回顾 1.基本数据类型 整型 int ...
- python文件操作方式
一.文件操作 1.什么是文件 文件是操作系统暴露给用户能够快捷方便操作硬盘的快捷方式(接口) 2.代码如何操作文件 关键字:open() 三步走: 1.利用关键字open打开文件 2.利用其他方法操作 ...
- Solution -「CF 923E」Perpetual Subtraction
\(\mathcal{Description}\) Link. 有一个整数 \(x\in[0,n]\),初始时以 \(p_i\) 的概率取值 \(i\).进行 \(m\) 轮变换,每次均匀随机 ...
- Solution -「ARC 126E」Infinite Operations
\(\mathcal{Description}\) Link. 给定序列 \(\{a_n\}\),定义一次操作为: 选择 \(a_i<a_j\),以及一个 \(x\in\mathbb R ...
- C#操作读写INI配置文件
一个完整的INI文件格式由节(section).键(key).值(value)组成.示例如:[section]key1=value1key2=value2; 备注:value的值不要太长,理论上最多不 ...
- MySQL基于GTID的组复制（MGR）
环境准备 IP 主机名 操作系统 192.168.131.129 mgr-node1 CentOS7.6 192.168.131.130 mgr-node2 CentOS7.6 192.168.131 ...
- verification 提取差异点
提取出差异点 传统用例 项目A锁定的寄存器是regA,项目B的锁定功能的寄存器是regB,如果项目A用例中直接用 reg_model.regA.write(); reg_model.regA.read ...
- MyBatis中使用log4j进行调试入门实例
导入log4j.jar 设置日志级别等相关内容 文件内容(仅控制台有效): ### 设置###log4j.rootLogger = debug,stdout,D,E### 输出sql信息到控制抬 ## ...
- JVM学习——内存空间（学习过程）
JVM--内存空间 关于内存的内容,内存的划分.JVM1.7 -> 1.8的变化比较大 JVM指令执行的时候,是基于栈的操作.每一个方法执行的时候,都会有一个属于自己的栈帧的数据结构.栈的深度, ...