基于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 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...
随机推荐
- 人工智能——CNN卷积神经网络项目之猫狗分类
首先先导入所需要的库 import sys from matplotlib import pyplot from tensorflow.keras.utils import to_categorica ...
- swoole错误“Uncaught Error: Class 'swoole_server' not found”的解决办法
如果你在执行swoole对应文件时,报下面的错误, PHP Fatal error: Uncaught Error: Class 'swoole_server' not found in /mnt/w ...
- c++ 文本处理
c++ 文本处理 1.使用sstream版本 (1)功能:截取第一列为1以后的数据,如下图,截取第5行(包括第5行)以后的数据,前面4行数据丢弃. (2)代码:textProc.cc #include ...
- yum配置及使用命令
linux yum 命令 yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指 ...
- [LeetCode]1221. 分割平衡字符串
在一个「平衡字符串」中,'L' 和 'R' 字符的数量是相同的. 给出一个平衡字符串 s,请你将它分割成尽可能多的平衡字符串. 返回可以通过分割得到的平衡字符串的最大数量. 示例 1: 输入:s = ...
- 数据分析实际案例之：pandas在餐厅评分数据中的使用
目录 简介 餐厅评分数据简介 分析评分数据 简介 为了更好的熟练掌握pandas在实际数据分析中的应用,今天我们再介绍一下怎么使用pandas做美国餐厅评分数据的分析. 餐厅评分数据简介 数据的来源是 ...
- demo_2_27
#define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>#include <string.h> int count_bit_one ...
- 还在被数据分析报告折磨？Smartbi让你解放双手
数据分析报告贯穿了企业经营的时时刻刻,方方面面. 数据分析报告最常用于汇报分享:团队需要分享.沟通,数据分析师需要洞察数据.分析结果分享给企业领导.团队同事.大众媒体及更多的利益相关方. 数据分析报告 ...
- 一个快速制作表格的方法，和熬夜做表say拜拜
如今已是大数据时代了,统计工作是非常繁琐的一项工作,通常统计老师为了录单工作到下半夜或者是通宵,现在有了很多制作表单的软件,可以大大减轻基层统计老师的工作量,也增加了会员资料的保密性,给我们统计工作带 ...
- 什么是闭包？（python）
闭包,又称闭包函数或闭合函数,和嵌套函数类似.不同之处在于,闭包函数的外部函数返回的不是一个具体的值,而是一个函数.一般情况下,返回的函数会赋值给一个变量,便于反复调用. def outer(out) ...