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开发网页聊天室一.项 ...

随机推荐

go web编程——自定义路由设计
本文主要讲解go语言web编程中自定义路由器的设计.在此之前需要先了解一下go语言web编程中路由与http服务的基本原理,可以参考笔者另一篇博文:go web编程——路由与http服务 . 我们已经 ...
数组降维-JavaScript中apply方法妙用
海纳百川,有容乃大 1.普通循环转换方式将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性实现更为简洁优雅的转 ...
JavaScript面向对象编程（1）-- 基础
自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升.JavaScript最基本的使用,以及语法.浏览器对象等等东东在这里就不累赘了.把主要篇幅放在如何实现JavaScri ...
shell使用标准输出返回函数值
关于.net中使用reportview所需注意
参考文章链接:http://www.cnblogs.com/watercold/p/5258608.html 这段时间在做一个winform的小项目时,发现使用.net中的ReportViewer插件 ...
PCB设计规则中英文对照
Electrical(电气规则) Clearance:安全间距规则 Short Circuit:短路规则 UnRouted Net:未布线网络规则 UnConnected Pin:未连线引脚规则 Ro ...
hive的数据定义之创建数据库和表
1.对数据库的操作 create database hive_db //创建数据库hive_db create table hive_db.test(字段内容及其格式省略) //在数据库hive_db ...
String、StringBuffer、StringBuilder详解
String类字符串广泛应用在java编程中,String类在java.lang包中,String类是final修饰的,不能被继承,String类对象创建后不能修改,由0或多个字符组成,包含在一对双 ...
GO富集分析信号通路
基因富集分析是分析基因表达信息的一种方法,富集是指将基因按照先验知识,也就是基因组注释信息进行分类. 信号通路是指能将细胞外的分子信号经细胞膜传入细胞内发挥效应的一系列酶促反应通路.这些细胞外的分子信 ...
MyBatis框架之异常处理
MyBatis框架定义了许多的异常类,之所以定义这么多的异常类,应该是将每一种异常情况都独立出来,这样在出现异常时,定位就很明确了.而我们平时写代码时,都是瞎搞一通,异常类大多也是随便定义,或者是使用 ...

websocket简单实现聊天

websocket简单实现聊天的更多相关文章

随机推荐

热门专题