一，带昵称的群聊

#!/usr/bin/env python

# -*- coding:utf8 -*-

import json

from flask import Flask, request, render_template

from geventwebsocket.websocket import WebSocket

from gevent.pywsgi import WSGIServer

from geventwebsocket.handler import WebSocketHandler

app = Flask(__name__)

user_socket_dict = {}

@app.route("/")

def index():

    return render_template("index_nickname.html")

@app.route("/ws/<nick_name>")  # ws://127.0.0.1:8000/ws

def ws(nick_name):

    # print(request.environ)

    # print(request.environ.get("wsgi.websocket"))

    # 链接 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78>

    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket # 写上这个，代码可以有提示

    if user_socket:

        user_socket_dict[nick_name] = user_socket

    else:

        return render_template("index.html", msg="请使用web_socket链接")

    while 1:

        msg = user_socket.receive()

        for user_name, u_socket in user_socket_dict.items():  # type:WebSocket

            if user_socket != u_socket:  # 不给自己发消息

                try:

                    u_socket.send(json.dumps({"nick_name": nick_name, "msg": msg}))  # 发送人是

                except Exception as e:

                    continue

if __name__ == '__main__':

    http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler)

    # 使用WSGIServer，而不是flask自带的werkzeug,处理, 如果本次请求是ws开头的,就交给WebSocketHandler

    # 处理数据(给environ中添加websocket相关的键值对),处理完之后交给app

    http_server.serve_forever()

    # app.run()

templates:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

{{ msg }}

<h1>群P开始了</h1>

输入你的昵称:<input type="text" id="nick_name">

<button onclick="createWebsocket()">链接群聊</button>

编辑消息:<input type="text" id="msg_s">

<button onclick="send_msg()">发送</button>

<div style="border: 2px solid; width: 500px;height: 800px;" id="text_div">

</div>

<script>

    var ws = "";

    var text_div = document.getElementById("text_div");

    var nickName = "";

    function createWebsocket() {

        let nick_name = document.getElementById("nick_name").value;

        nickName = nick_name;

        let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName);  // 把名称当作url参数发过去

        ws = w_s;

        console.log("ws://127.0.0.1:8000/ws/" + nickName);

        ws.onmessage = function (data) {

            var obj_data = JSON.parse(data.data);

            console.log(data.data);

            var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>';

            text_div.innerHTML += p_ele

    }}

    function send_msg() {

        var msg_s = document.getElementById("msg_s").value;

        let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>";

        text_div.innerHTML += p_ele_s;

        ws.send(msg_s);

    }

</script>

</body>

</html>

二，带昵称的单聊

#!/usr/bin/env python

# -*- coding:utf8 -*-

import json

from flask import Flask, request, render_template

from geventwebsocket.websocket import WebSocket

from gevent.pywsgi import WSGIServer

from geventwebsocket.handler import WebSocketHandler

app = Flask(__name__)

user_socket_dict = {}

@app.route("/")

def index():

    return render_template("index_nickname_danren.html")

@app.route("/ws/<nick_name>")  # ws://127.0.0.1:8000/ws

def ws(nick_name):

    # print(request.environ)

    # print(request.environ.get("wsgi.websocket"))

    # 链接 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78>

    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket # 写上这个，代码可以有提示

    if user_socket:

        user_socket_dict[nick_name] = user_socket

    else:

        return render_template("index.html", msg="请使用web_socket链接")

    while 1:

        msg = user_socket.receive()

        msg_dict = json.loads(msg)

        to_user = msg_dict.get('to_user')

        msg = msg_dict.get("msg")

        to_user_socket = user_socket_dict.get(to_user)  # type:WebSocket

        to_user_socket.send(json.dumps({"nick_name": nick_name, "msg": msg}))

if __name__ == '__main__':

    http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler)

    # 使用WSGIServer，而不是flask自带的werkzeug,处理, 如果本次请求是ws开头的,就交给WebSocketHandler

    # 处理数据(给environ中添加websocket相关的键值对),处理完之后交给app

    http_server.serve_forever()

    # app.run()

templates:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

{{ msg }}

<h1>群P开始了</h1>

输入你的昵称:<input type="text" id="nick_name">

<button onclick="createWebsocket()">链接群聊</button>

<p>与：<input type="text" id="to_user">轻声细语</p>

编辑消息:<input type="text" id="msg_s">

<button onclick="send_msg()">发送</button>

<div style="border: 2px solid; width: 500px;height: 800px;" id="text_div">

</div>

<script>

    var ws = "";

    var text_div = document.getElementById("text_div");

    var nickName = "";

    function createWebsocket() {

        let nick_name = document.getElementById("nick_name").value;

        nickName = nick_name;

        let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName);  // 把名称当作url参数发过去

        ws = w_s;

        console.log("ws://127.0.0.1:8000/ws/" + nickName);

        ws.onmessage = function (data) {

            var obj_data = JSON.parse(data.data);

            console.log(data.data);

            var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>';

            text_div.innerHTML += p_ele

    }}

    function send_msg() {

        var msg_s = document.getElementById("msg_s").value;

        var to_user = document.getElementById("to_user").value;

        let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>";

        text_div.innerHTML += p_ele_s;

        var msg_obj = JSON.stringify({to_user:to_user,msg:msg_s});

        ws.send(msg_obj);

    }

</script>

</body>

</html>

websocket之简易聊天室的更多相关文章

  1. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

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

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

  3. node.js+websocket实现简易聊天室

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...

  4. node+websocket创建简易聊天室

    关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...

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

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

  6. WebSocket实现简易聊天室

    前台页面: <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  7. 小案例-WebSocket实现简易聊天室

    前言 在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的"请求-问答模式"这一局限,实现了服务器主动向客户端传送数据.而本章将通过一种在单个TCP连接上进行全双工通信的协议 ...

  8. 基于WebSocket的简易聊天室

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

  9. Servlet WebSocket的简易聊天室

    添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...

  10. 使用go，基于martini，和websocket开发简易聊天室

    一.首先,需要了解一下websocket基本原理:here 二.go语言的websocket实现: 基于go语言的websocket也有不少,比如github.com/gorilla/websocke ...

随机推荐

  1. 微信小程序开发——文本框种输入手机号，点击获取验证码无反应的处理方法

    异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...

  2. 对象与json字符串转换类设计

    public static class JsonNewtonsoft { /// <summary> /// 把对象转换为JSON字符串 /// </summary> /// ...

  3. JSON序列化和反序列化 对decmail 取值问题

    地图API返回经纬度:经度: 纬度: lng":114.03483089395202,"lat":22.615589046911805 decmail 接收数据后两位会截 ...

  4. Flutter Dart List.map() 获取下标

    class HomePageState extends State{ final topTitles = ['审批单', '机票列表', '客服']; final topIcons = ['asset ...

  5. docker安装并运行rabbitmq

    拉取镜像: [mall@VM_0_7_centos ~]$ [sudo] password for mall: : Pulling from library/rabbitmq 5b7339215d1d ...

  6. CFCA证书工具类

    jar:com.cfca.pkibase-1.0.jar import java.io.UnsupportedEncodingException; import java.security.Secur ...

  7. Linux下 PostgrelSQL 基本操作

    一.在默认配置条件下,本机访问PostgreSQL 切换到Linux用户postgres,然后执行psql: $ su - postgres Last login: Wed Mar 1 13:16:4 ...

  8. TWA那些事儿

    一.参考学习 https://developer.android.google.cn/studio/ https://juejin.im/post/5cf50755e51d455d850d3aa7

  9. CentOS的vsftp修改默认配置路径方法

    修改ftp的根目录只要修改/etc/vsftpd/vsftpd.conf文件即可: 加入如下几行: local_root=/var/www/htmlchroot_local_user=YESanon_ ...

  10. Activiti数据库表结构(23张表5.*版本)

    1  Activiti数据库表结构 1.1      数据库表名说明 Activiti工作流总共包含23张数据表,所有的表名默认以“ACT_”开头. 并且表名的第二部分用两个字母表明表的用例,而这个用 ...