基于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 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...
随机推荐
- SpringBoot自动配置的魔法
Spring自动配置 从@SpringBootApplication注解说起 SpringBoot会根据类路径下的类自动配置,省去了编写繁琐的xml配置文件.原本基于xml配置bean的方式编程基于J ...
- 静态分离 & rewrit 重写 & HTTPS
内容概要 资源分离 Nginx 的 Rewrite重写 HTTPS 内容详细 一.动静分离 1.在 nfs 中创建 NFS 挂载点 [root@nfs static]# mkdir /static [ ...
- nginx反向代理初体验
需求:部署两台tomcat,默认监听端口分别是8080和8081.访问nginx服务时,自动跳转到相应tomcat服务. 先部署一台机器:就宿主机上tomcat服务: 修改nginx配置:vim ng ...
- CTO（技术总监）平时都在做些什么？
目前创业,最后一家公司任职医疗科技公司的研发中心总经理,之前也在几家公司的任职研发/技术总监岗位,在我理解的范围,目前国内中小企业对于CTO/技术总监的岗位区别没有那么明确的职能区分. 1. 先总结 ...
- ios开发 Rsa签名 base64转码
因为公司要求做了一个加密 网上的资料少有可用的 于是我看到了一位大神的曙光 但是未介绍使用方法 然后另一位大神给予了使用方法 但是没有把库给出来 我整理了一下 希望大家看的有些启发 证书生成 ...
- NSSCTF-easyupload2.0
相对于easyupload3.0,这个easyupload2.0就简单的很多,也可以使用和3.0一样的做法,但是应该还是有别的做法,就比如可以使用phtml这个后缀绕过检测 使用BP抓包修改一下 放包 ...
- [杂记]CodeBlocks下载、安装及设置
zyy安装codeblocks十次有九次都会卡在奇怪的地方,所以写篇博文以提醒自己少犯蠢[叹气] 下载 http://www.codeblocks.org/downloads/26 这是官网,以win ...
- Internet/Custom路由配置——网络测试仪实操
一.测试说明以及功能原理 本文主要介绍Internet/Custom路由配置方法以及实验: ◆作用:可以通过此功能模拟注入不同百分比掩码的路由 ◆特点:只针对路由协议(目前RIP协议不支持,因为RIP ...
- 【C# .Net GC】Windows 系统上的大型对象堆
原文链接:https://docs.microsoft.com/zh-cn/dotnet/standard/garbage-collection/large-object-heap NET 垃圾回收器 ...
- Python：输入关键字进行百度搜索并爬取搜索结果
学习自:手把手教你用Python爬取百度搜索结果并保存 - 云+社区 - 腾讯云 如何利用python模拟百度搜索,Python交流,技术交流区,鱼C论坛 指定关键字,对其进行百度搜索,保存搜索结果, ...