基于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 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...
随机推荐
- 学习Spring5必知必会（1）~未使用spring前的麻烦
一.未使用spring前的麻烦 开闭原则:扩展是开放的,但是对于修改是"封闭的". 1.代码耦合度比较高[不符合开闭原则]: public class EmployeeServic ...
- PHP程序员可以这样准备找工作
你好,是我琉忆.PHP程序员面试笔试图书系列作者. 今天就跟大家聊聊作为一个PHP程序员,每年的跳槽季都应该怎么准备一番. 其实普遍的跳槽季总的就有2个. 分别是新年后的3-4月,还有9-10月份. ...
- Solution -「ARC 110E」Shorten ABC
\(\mathcal{Description}\) Link. 给定长度为 \(n\),包含 A, B, C 三种字符的字符串 \(S\),定义一次操作为将其中相邻两个不相同的字符替换为字符集 ...
- .NET CORE 鉴权
基础信息 1.什么是鉴权授权? 鉴权是验证用户是否拥有访问系统的权利,授权是判断用户是否有权限做一些其他操作. 2.传统的Session 和Cookie 主要用于无状态请求下的的用户身份识别,只不过S ...
- 【一天一个小知识10/20】Unity安卓获取麦克风并录音保存。
2021-10-20 10:42:16 #region 模块信息 // **************************************************************** ...
- Seastar 教程（一）
介绍 我们在本文档中介绍的Seastar是一个 C++ 库,用于在现代多核机器上编写高效的复杂服务器应用程序. 传统上,用于编写服务器应用程序的编程语言库和框架分为两个不同的阵营:专注于效率的阵营和专 ...
- 个人站bitlove.cn
新启用了个人网站 微爱博客 http://bitlove.cn 有兴趣的可以移步交流
- 开源报表工具太复杂？不如用这款免费web报表工具
随着信息系统的高速发展,报表平台逐渐成为了信息系统当中最为核心和重要的功能模块.报表工具有助于将原始数据可视化显示,使决策者或者相关人员能够一览整体的数据趋势,完整的报表解决方案会提供多样的表格数据展 ...
- Vue框架简介和环境搭建
前言: 此篇随笔为个人学习前端框架Vue,js的技术笔记,主要记录一些自己在学习Vue框架的心得体会和技术总结,作为回顾和笔记使用. 这种写博客的方式,对刚开始学习Vue框架的我,也是一种激励,我相信 ...
- 【C# TAP 异步编程】一 、async 修饰符（标记）
async的作用: 1.async是一个标记,告诉编译器这是一个异步方法. 2.编译器会根据这个标志生成一个异步状态机. 3.编译器将原异步方法中的代码清空,写入状态机的配置,原先异步方法中的代码被封 ...