使用websocket实现单聊和多聊
单聊:
前端:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<p>您的昵称:<input type="text" id="nick"><button onclick="openws()">进入聊天室</button></p>
<p>给<input type="text" id="to_user">发送:<input type="text" id="message"><button onclick="send_msg()">发送消息</button></p>
<div id="msg_list" style="width: 500px;"> </div>
</body>
<script type="application/javascript">
var ws = null;
// ws.onopen = function(){
// alert("欢迎来到群喷");
// }; function openws(){
var nick = document.getElementById("nick").value;
ws = new WebSocket("ws://192.168.12.10:5000/ws/"+nick);
ws.onmessage = function (ws_status) {
console.log(ws_status.data);
var msg_obj = JSON.parse(ws_status.data);
var ptag = document.createElement("p");
ptag.innerText = msg_obj.from_user + " : " +msg_obj.msg;
document.getElementById("msg_list").appendChild(ptag);
};
} function send_msg() {
var msg = document.getElementById("message").value;
var from_user = document.getElementById("nick").value;
var to_user = document.getElementById("to_user").value;
var ptag = document.createElement("p");
ptag.style.cssText = "text-align: right;";
ptag.innerText = msg + " : "+ from_user;
document.getElementById("msg_list").appendChild(ptag);
var msg_obj = {
msg:msg,
from_user:from_user,
to_user:to_user
};
ws.send(JSON.stringify(msg_obj));
}; </script>
</html>
后端:
from flask import Flask,request,render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
import json from geventwebsocket.websocket import WebSocket app = Flask(__name__)
user_socket_dict = { } @app.route('/ws/<user>')
def ws(user):
user_socket = request.environ.get('wsgi.websocket') #原请求
if user_socket:
user_socket_dict[user] = user_socket while 1:
msg = user_socket.receive()
msg_dict = json.loads(msg)
to_usocket = user_socket_dict.get(msg_dict.get("to_user"))
to_usocket.send(json.dumps({"from_user": user, "to_user": msg_dict.get("to_user"), "msg": msg_dict.get("msg")})) @app.route("/")
def index():
return render_template("ws_one.html") if __name__ == '__main__':
# app.run("0.0.0.0",5000,debug=True)
http_serv = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler)
http_serv.serve_forever()
多聊:
前端
<!DOCTYPE html>
<html lang="zn-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<p>发送内容: <input type="text" id="message"> <button onclick="send_msg()">发送消息</button></p>
<div id="msg_list" style="width: 500px"></div>
</body> <script type="application/javascript">
var ws = new WebSocket("ws://192.168.12.10:5000/ws");
// ws.onopen = function(){ //当打开的时候发送消息
// ws.send('hello')
// };
ws.onmessage = function (ws_status) {
console.log(ws_status.data);
var ptag = document.createElement('p');
ptag.innerText = ws_status.data;
document.getElementById('msg_list').appendChild(ptag)
};
function send_msg() {
var msg = document.getElementById('message').value;
var ptag = document.createElement('p');
ptag.style.cssText = 'text-align:right;';
ptag.innerText = msg;
document.getElementById('msg_list').appendChild(ptag)
ws.send(msg)
} </script>
</html>
后端:
from flask import Flask,request,render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket app = Flask(__name__) user_socker_list = []
@app.route('/ws')
def ws():
user_socker = request.environ.get('wsgi.websocket') #type:WebSocket
if user_socker:
user_socker_list.append(user_socker)
print(len(user_socker_list), user_socker_list)
while 1:
msg = user_socker.receive()
print(msg)
for usocker in user_socker_list:
if user_socker == usocker:
continue
try:
usocker.send(msg)
except:
continue
@app.route('/')
def index():
return render_template('ws_all.html') if __name__ == '__main__':
# app.run(debug=True)
http_serv = WSGIServer(("0.0.0.0",5000),app,handler_class=WebSocketHandler)
http_serv.serve_forever()
使用websocket实现单聊和多聊的更多相关文章
- websocket 实现单聊群聊 以及 握手原理+加密方式
WebSocket 开始代码 服务端 群聊 # type:WebSocket 给变量标注类型 # websocket web + socket from geventwebsocket.server ...
- SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密
1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...
- 基于websocket的单聊.群聊
关于ai.baidu.com的 代码: #########################################核心代码################################### ...
- flask + websocket实现简单的单聊和群聊
单聊 from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHand ...
- websocket实现单聊
server# @File: ws from flask import Flask, request, render_template from geventwebsocket.handler imp ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(三) 之 实现单聊,群聊,发送图片,文件。
上篇讲解了如何搭建聊天服务器,以及客户端js怎么和layui的语法配合.服务器已经连接上了,那么聊天还会远吗? 进入正题,正如上一篇提到的我们用 Client.Group(groupId)的方法向客户 ...
- happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发
一.前言 乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能.因为这个自己做了PC端,无线端(手机端),以及使用cordo ...
- netty无缝切换rabbitmq、activemq、rocketmq实现聊天室单聊、群聊功能
netty的pipeline处理链上的handler:需要IdleStateHandler心跳检测channel是否有效,以及处理登录认证的UserAuthHandler和消息处理MessageHan ...
随机推荐
- wx地址和腾讯地图
如果只是要获取当前用户的经纬度和打开微信自带的地图 只需要 jsApiList: ["getLocation","openLocation"] // 先获得 w ...
- 树莓派—raspbian软件源
零.一键换源 2018.05.18更新:新的默认源为raspbian.raspberrypi.org 因此一键换源相应改为 sudo sed -i 's#://raspbian.raspberrypi ...
- HDU1007 Quoit Design掷环游戏
Quoit Design 看懂题意以后发现就是找平面最近点对间距离除以2. 平面上最近点对是经典的分治,我的解析 直接上代码 #include<bits/stdc++.h> using n ...
- 定义一个共享数据块DB1 在DB1中定义一个数组 用程序 访问数据里面的某一个成员或者地址连续的成员
提纲 : 定义一个共享数据块 DB1 在DB1 中定义数组 用SFC21 实现 实现全部数组元素的赋一样的值 实现 给数组中的某一个元素赋值 实现 对数组中的全部元素赋值 实现将数组中的某个 或者 某 ...
- GNS3 模拟icmp端口不可达
R1 : conf t int f0/0 no shutdown ip add 192.168.1.1 255.255.255.0 no ip routing end R2 f0/0: conf t ...
- cf 762D. Maximum path
天呢,好神奇的一个DP23333%%%%% 因为1.向左走1格的话相当于当前列和向左走列全选 2.想做走超过1的话可以有上下走替代.而且只能在相邻行向左. 全选的情况只能从第1行和第3行转移,相反全选 ...
- BZOJ 4853 [Jsoi2016]飞机调度
题解: 我严重怀疑语文水平(自己的和出题人的) 把航线按照拓扑关系建立DAG 然后最小路径覆盖 为什么两条首尾相接航线之间不用维护???? #include<iostream> #incl ...
- ES6与ES5的继承
ES6 ES6中的类 类与ES5中的构造函数写法类似 区别在于属性要放入constructor中,静态方法和属性实列不会继承 <script> class Person{ height=& ...
- JavaWeb学习——了解HTML
JavaWeb学习——了解HTML 摘要:本文主要简单介绍了什么是HTML以及如何使用. 定义 是什么 HTML(Hyper Text Markup Language),指的是超文本标记语言. 超文本 ...
- java核心-多线程(1)-知识大纲
Thread,整理一份多线程知识大纲,大写意 1.概念介绍 线程 进程 并发 2.基础知识介绍 Java线程类 Thread 静态方法&实例方法 Runnable Callable Futur ...