一，带昵称的群聊

#!/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. Oracle系列十 创建和管理表

    常见的数据库对象 Oracle 数据库中的表 用户定义的表: 用户自己创建并维护的一组表 包含了用户所需的信息 如:SELECT * FROM user_tables;查看用户创建的表 数据字典: 由 ...

  2. unable to lock the administration错误解决

    在ubantu系统上,使用 apt-get 命令或者其相对更新的APT 管理工具时,遇到 unable to lock the administration directory (/var/lib/d ...

  3. Eclipse新项目检出后报错第一步：导入lib中的jar包【我】

    新检出项目报错,第一步,先看项目 web-info下的 lib目录里的包是不是都添加到项目构建中了,可以全选先添加到项目构建中,看项目是否还在报错.

  4. Mac下的IDEA快捷键

    快捷键 功能 Option + enter 打开提示 Command + / 注释方式是“行注释”:可以注释当前行.取消当前行的注释 注释选中的内容.取消选中行的注释 Option + Command ...

  5. layui自定义模块

    想把用了layui的页面的一些函数抽取公用,直接引入外部js不可行,只能用layui的模块功能.官网没有说明,但模块名必须和文件名一致 新建yananmod.js文件,内容如下: layui.defi ...

  6. ajax中参数traditional的作用

    在使用ajax向后台传值的时候,有的时 $.ajax({ type: "post", async: true, data: { "records": [&quo ...

  7. 从Asp .net到Asp core （第一篇）《回顾Asp .net生命周期与管道机制》

    从2016年微软收购了Xamarin整合到Visual Studio里并将其开源到现在已有三年多时间,从.net core 1.0 到现在的2.2,以及即将问世的3.0,我们看到微软正在跨平台之路越走 ...

  8. MapReduce Join关联

    Reduce join 原理 Map端的主要工作:为来自不同表(文件)的key/value对打标签以区别不同来源的记录.然后用连接字段作为key,其余部分和新加的标志作为value,最后进行输出. R ...

  9. python中的for循环加强

    #先执行外面for循环,再执行里面for循环,接着执行外面for循环,程序结束 #打印结果为1,10,2 flag=False for i in range(1,10): print(i) if fl ...

  10. gdb调试常用功能

    一.gdb中宏定义 macro define list_entry(ptr, type, member) ((type)( (char)ptr - (unsigned long)(&((typ ...