websocket简单实现聊天
1.多人聊天
from geventwebsocket.handler import WebSocketHandler # 请求处理WSGI HTTP
from geventwebsocket.server import WSGIServer # 替换Flask原来的WSGI服务
from geventwebsocket.websocket import WebSocket # 语法提示
from flask import Flask, render_template, request app = Flask(__name__)
socket_dict = {} @app.route("/ws")
def my_ws():
ws_socket = request.environ.get("wsgi.websocket")# type:WebSocket
socket_dict[ws_socket] = ws_socket # 可以使用用户名，使用动态路由参数传username
print(socket_dict)
while True:
msg = ws_socket.receive()
print(msg)
for ksocket,vscoket in socket_dict.items():
if ksocket == ws_socket:
continue
vscoket.send(msg) @app.route("/wechat")
def wechat():
return render_template("测试用.html") if __name__ == "__main__": http_serv = WSGIServer(("0.0.0.0", 9527), app, handler_class=WebSocketHandler)
# WebSocketHandler既支持websocket请求，也支持http请求
http_serv.serve_forever() # wsgi启动服务
<!DOCTYPE html>
<html lang="en">
<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>
<style>
body #content_list {
border: solid black;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="content_list" style="overflow-y: auto"></div>
<p>
昵称:<input type="text" id="username">
<button onclick="login()">登录聊天室</button>
</p>
<input type="text" id="content">
<button onclick="send_msg()">发送消息</button>
</body>
<script type="application/javascript">
var ws = null; function send_msg() {
var msg = document.getElementById("content").value; //获取发送内容
var sender = document.getElementById("username").value; //获取发送人名字
// 发送的信息内容
var send_str = {
sender: sender,
data: msg
}; ws.send(JSON.stringify(send_str)); // 将发送的信息json序列化
var my_div = document.getElementById("content_list"); // 获取div标签
var ptag = document.createElement("p"); // 创建一个p标签
ptag.innerText = msg + " : 我"; // 设置p标签中的文本内容
ptag.style.cssText = "text-align: right"; // p标签设置css样式，文本靠右
my_div.appendChild(ptag); // 将p标签添加进div标签中
document.getElementById("content").value = "";
} function login() {
var username = document.getElementById("username").value; // 获取登录用户名
console.log(username);
ws = new WebSocket("ws://127.0.0.1:9527/ws"); // 执行websocket服务，如果需要username，可以在url上增加
// 当客户端收到消息时，执行匿名函数
ws.onmessage = function (messageEvent) {
console.log(messageEvent.data);
var obj = JSON.parse(messageEvent.data); // 将接收的数据反序列化
var my_div = document.getElementById("content_list"); // 获取div标签
var ptag = document.createElement("p"); // 获取p标签
ptag.innerText = obj.sender + " : " + obj.data; // 设置p标签中文本内容
my_div.appendChild(ptag); // 将p标签放到div中
};
}
</script>
</html>
2.一对一聊天
import json
from geventwebsocket.handler import WebSocketHandler # 请求处理WSGI HTTP
from geventwebsocket.server import WSGIServer # 替换Flask原来的WSGI服务
from geventwebsocket.websocket import WebSocket # 语法提示
from flask import Flask,render_template,request app = Flask(__name__)
socket_dict = {}
@app.route("/ws/<username>")
def my_ws(username):
# 获取链接地址
ws_socket = request.environ.get("wsgi.websocket") #type:WebSocket
socket_dict[username] = ws_socket
while True:
msg = ws_socket.receive() # 接收浏览器发来的信息
msg_dict = json.loads(msg) # 将信息反序列化，是字典
receiver = msg_dict.get("receiver") # 获取字典中接收人的名字
receiver_socket = socket_dict.get(receiver) # 从字典中找到接收人名字对应的链接地址
receiver_socket.send(msg) # 向接收人的链接地址发送信息
@app.route("/wechat")
def wechat():
return render_template("测试用.html")
if __name__ == "__main__":
http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
# WebSocketHandler既支持websocket请求，也支持http请求
http_serv.serve_forever() # wsgi启动服务
<!DOCTYPE html>
<html lang="en">
<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>
<style>
body #content_list {
border: solid black;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="content_list" style="overflow-y: auto"></div>
<p>
昵称:<input type="text" id="username">
<button onclick="login()">登录聊天室</button>
</p>
给<input type="text" id="receiver">发送<input type="text" id="content">
<button onclick="send_msg()">发送消息</button>
</body>
<script type="application/javascript">
var ws = null; function send_msg() {
var msg = document.getElementById("content").value; //获取发送内容
var receiver = document.getElementById("receiver").value; // 获取接收人名字
var sender = document.getElementById("username").value; //获取发送人名字
// 发送的信息内容
var send_str = {
receiver: receiver,
sender: sender,
data: msg
}; ws.send(JSON.stringify(send_str)); // 将发送的信息json序列化
var my_div = document.getElementById("content_list"); // 获取div标签
var ptag = document.createElement("p"); // 创建一个p标签
ptag.innerText = msg + " : 我"; // 设置p标签中的文本内容
ptag.style.cssText = "text-align: right"; // p标签设置css样式，文本靠右
my_div.appendChild(ptag); // 将p标签添加进div标签中
document.getElementById("content").value = ""; //将聊天输入框置空
} function login() {
var username = document.getElementById("username").value; // 获取登录用户名
ws = new WebSocket("ws://127.0.0.1:9527/ws/" + username); // 执行websocket服务
// 当客户端收到消息时，执行匿名函数
ws.onmessage = function (messageEvent) {
console.log(messageEvent.data);
var obj = JSON.parse(messageEvent.data); // 将接收的数据反序列化
var my_div = document.getElementById("content_list"); // 获取div标签
var ptag = document.createElement("p"); // 获取p标签
ptag.innerText = obj.sender + " : " + obj.data; // 设置p标签中文本内容
my_div.appendChild(ptag); // 将p标签放到div中
};
}
</script>
</html>
websocket简单实现聊天的更多相关文章
- JAVA WebSocKet ( 简单的聊天室 )
1, 前端代码 登入页 -> login.html <!DOCTYPE html> <html> <head> <meta charset=" ...
- python使用websocket简单组建聊天室
server端 ###websocket_server### import socket import threading sock = socket.socket(socket.AF_INET, s ...
- Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能
本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自 ...
- Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...
- Netty+WebSocket简单实现网页聊天
基于Netty+WebSocket的网页聊天简单实现 一.pom依赖 <dependency> <groupId>io.netty</groupId> ...
- nodejs与websocket模拟简单的聊天室
nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...
- 基于websocket实现的一个简单的聊天室
本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- Java和WebSocket开发网页聊天室
小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...
随机推荐
- 将ibatis迁移到mybatis3的过程记录
将ibatis迁移到mybatis3的过程记录 场景:有些以前的老项目是使用ibatis开发的,现在有转换成mybatis3的需求. 环境准备:需要安装Ant,以下是本人的安装版本,具体怎么安装不再赘 ...
- mongodb 多表关联处理 : 内嵌以及连接(手动引用、DBref) 、aggregate中$lookup
MongoDB与关系型数据库的建模还是有许多不同,因为MongoDB支持内嵌对象和数组类型.MongoDB建模有两种方式,一种是内嵌(Embed),另一种是连接(Link).那么何时Embed何时Li ...
- Flutter第三方選擇器組件
调用Flutter的第三方时间选择器组件 上面我介绍了系统给我们提供的日期时间选择器,但是有时候系统提供的选择器并不符合我们的要求,这时我们就可以到pub.dev上去寻找符合我们要求的日期选择器. 这 ...
- golang-练习3
题目:将输入的字母变成其下一个字母,并且元音字母大写 package main import "fmt" func LetterChanges(str string) string ...
- UOJ131 [NOI2015] 品酒大会
考前挣扎(bu shi 之前留下来的坑 首先注意到 SAM的parent树 是反串的后缀树 也就是原串的前缀树 这个性质很重要 所以说我们在树上统计的时候两个点的lca就是两个后缀串的lcp 于是可以 ...
- c++ 预处理指令#define, #endif...
常见的预处理指令有: # 空指令,无任何效果 # include 包含一个源代码文件 #define 定义宏 #undef 取消已定义的宏 #if 如果给定条件为真,则编译下面代码 #ifdef 如果 ...
- mybatis整合redis二级缓存
mybatis默认开启了二级缓存功能,在mybatis主配置文件中,将cacheEnabled设置成false,则会关闭二级缓存功能 <settings> <!--二级缓存默认开启, ...
- HttpClient之EntityUtils工具类
今天看到tttpclient-tutorial上面有这样一句话-----非常的不推荐使用EntityUtils,除非知道Entity是来自可信任的Http Server 而且还需要知道它的最大长度.文 ...
- 图与例解读Async/Await
JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...
- ADSL（Asymmetric Digital Subscriber Loop）技术
上行带宽,下行带宽 宽带上行下行是指一般ADSL上网方式上行与下行速率,上行就是从电脑上传的速度,下行就是从网络上的主机下载速度,一般下行速率比较高! ADSL(Asymmetric Digital ...