1.前端HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="width: 600px;">
<input type="text" id="username">
<button onclick="login()">登录聊天室</button>
</div>
<br>
<div style="width: 600px;">
给:<input type="text" id="to_user">
发送:<input type="text" id="msg">
<button onclick="send_msg()">发送</button>
</div>
<br>
<div id="chat_list" style="width: 600px;height: 300px;"></div> </body>
<script type="application/javascript">
var ws = null; function login() {
var username = document.getElementById("username").value;
// 打印当前登录用户名
console.log(username);
// 注意ws/,斜线不要忘记写
ws = new WebSocket("ws://192.168.13.21:5300/ws/" + username);
// 打印创建的socket链接
console.log(ws);
ws.onmessage = function (data) {
console.log(data.data);
var recv_msg = JSON.parse(data.data);
var ptag = document.createElement("p");
ptag.innerText = recv_msg.from_user + ":" + recv_msg.msg;
document.getElementById("chat_list").appendChild(ptag);
}
} function send_msg() {
var to_user = document.getElementById("to_user").value;
var msg = document.getElementById("msg").value;
var send_str = {
"to_user": to_user,
"msg": msg
};
ws.send(JSON.stringify(send_str));
}
</script>
</html>

2.后端PYTHON

from flask import Flask,render_template,request
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
import json app=Flask(__name__)
user_socket_list = []
user_socket_dict = {} @app.route("/ws/<username>")
def ws(username):
print('当前登录账号:',username)
user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
if user_socket:
user_socket_dict[username] = user_socket
else:
pass
while 1:
msg = user_socket.receive()
msg_dict = json.loads(msg)
msg_dict["from_user"] = username
to_user = msg_dict.get("to_user")
u_socket = user_socket_dict.get(to_user) # type:WebSocket
u_socket.send(json.dumps(msg_dict)) @app.route("/")
def index():
return render_template("ws.html") if __name__ == '__main__':
http_serv = WSGIServer(("0.0.0.0",5300),app,handler_class=WebSocketHandler)
http_serv.serve_forever()

需要借助2个浏览器实现

基于websocket搭建简易群聊的更多相关文章

  1. WebSocket 实现链接 群聊(low low low 版本)

    py 文件: """ 下载 gevent-websocket 0.10.1 基于Flask + geventWebSocket 建立连接,发送消息,实现群消息功能. &q ...

  2. 基于itchat的微信群聊小助手基础开发(一)

    前段时间由于要管理微信群,基于itchat开发了一个简单的微信机器人 主要功能有: 图灵机器人功能 群聊昵称格式修改提示 消息防撤回功能 斗图功能 要开发一个基于itchat的最基本的聊天机器人,在g ...

  3. websocket学习和群聊实现

    WebSocket协议可以实现前后端全双工通信,从而取代浪费资源的长轮询.在此协议的基础上,可以实现前后端数据.多端数据,真正的实时响应.在学习WebSocket的过程中,实现了一个简化版群聊,过程和 ...

  4. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...

  5. 基于nginx搭建简易的基于wcf集群的复杂均衡

    很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk对C# 不大友好,实现起来相对来说比较麻烦,实际情况下,如果 你的负载机制粒度很粗糙的话,优先使用nginx就 ...

  6. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  7. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  8. Tinychatserver: 一个简易的命令行群聊程序

    这是学习网络编程后写的一个练手的小程序,可以帮助复习socket,I/O复用,非阻塞I/O等知识点. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. 功能 编写一个简 ...

  9. 使用java做一个能赚钱的微信群聊机器人(2020年基于PC端协议最新可用版)

    前言 微信群机器人,主要用来管理群聊,提供类似天气查询.点歌.机器人聊天等用途. 由于微信将web端的协议封杀后,很多基于http协议的群聊机器人都失效了,所以这里使用基于PC端协议的插件来实现. 声 ...

随机推荐

  1. spring中反射机制和注入的使用

    http://www.cnblogs.com/andin/archive/2011/04/30/spring.html spring的一大核心概念是注入, 但是,这存在的一个前提就是类是由spring ...

  2. linq-to-sql实现left join,group by,count

    linq-to-sql实现left join,group by,count 用linq-to-sql实现下面的sql语句: SELECT p.ParentId, COUNT(c.ChildId) FR ...

  3. linux 查看cpu相关信息命令

  4. jq时间戳转化为可视化时间

    //2016年5月21日 23:12:07 function getDateTimeToDate(dt){ var dateTime = new Date(dt); var date = dateTi ...

  5. 解决:System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用

    还原 AdventureWorks Sample DataBase 时遇到 FILESTREAM feature is disabled 错误提示. FileStream是SQL Server 200 ...

  6. 【应用篇】Activiti外置表单实例demo(四)

    在这里我想说的外置表单.是说我们将我们自己的jsp(.form,.html)等页面上传到工作流的数据库中,当任务运行到当前结点时.给我们像前台发送绑定好的表单. 此处是给表单绑定表单的过程 water ...

  7. Atitit. Derby的使用总结attilax

    Atitit. Derby的使用总结attilax 1. Derby数据库的存储结构1 2. Derby gui工具1 3. 代码读写derby2 4. 与sqlite db4o的对比4 5. 参考5 ...

  8. Java 实现单链表反序

    //单链表反序 public class SingleLinkedListReverse { public static void main(String[] args) { Node head = ...

  9. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  10. python加密包

    利用pycrypto包进行AES.DES.MD5等加密 原文: http://www.cnblogs.com/darkpig/p/5676076.html 第三方Crypto包提供了较全面的加密算法, ...