一，带昵称的群聊

#!/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. 在asp.net core中使用NLog

    第一步:nuget  引入  NLog.Web.AspNetCore 4.5+ 第二步:放入nlog.config <?xml version="1.0" encoding= ...

  2. Qt编写控件属性设计器11-导入xml

    一.前言 上一篇文章负责把设计好的控件数据导出到了xml文件,本偏文章负责把导出的xml数据文件导入,然后在画布上自动生成对应的控件,Qt内置的xml数据解析功能,非常强大,都封装在QtXml组件中, ...

  3. 开发日记：常用BAT批处理

    备份文件:BackupSourceCode.bat ::自动备份当前文件夹 ::by luomg, 21:15 2010-10-13 ::minguiluo@163.com @echo off tit ...

  4. LODOP中打印项水平居中简短问答

    相关博文:LODOP打印项水平居中(超文本纯文本居中)LODOP打印超文本有边距不居中的情况2(超文本居中的一种) LODOP表格水平居中3(宽度为百分比)(超文本居中的一种) LODOP打印图片水平 ...

  5. ServletRequest与HttpServletRequest

    ServletRequest 解析:代表来自客户端的请求.当Servlet容器接收到客户端的要求访问特定Servlet的请求时,容器先解析客户端的原始请求数据,把它包装成一个ServletReques ...

  6. [LeetCode] 276. Paint Fence 粉刷篱笆

    There is a fence with n posts, each post can be painted with one of the k colors. You have to paint ...

  7. [LeetCode] 636. Exclusive Time of Functions 函数的独家时间

    Given the running logs of n functions that are executed in a nonpreemptive single threaded CPU, find ...

  8. Java设计模式之：单例模式

    单例模式 建议实现方式:枚举方式实现单例 单例模式的定义 单例模式就是在程序运行中只实例化一次,创建一个全局唯一对象,有点像 Java 的静态变量,但是单例模式要优于静态变量,静态变量在程序启动的时候 ...

  9. vue-cli3 element 分页组件el-pagination的基本使用

    <!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...

  10. js arguments

    偶然碰见一个有意思的题 <script> var length = 10; function fn() { console.log( this.length ); // 10 } var ...