一，带昵称的群聊

#!/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. 获取进程 pid 以及命令参数

    方法一: wmic process where name="node.exe" get ProcessId,CommandLine 方法二: tlist -c

  2. [AWS] Cloud Server

    一元课程:AWS云计算——AWS操作指南系列课程 AWS 入门指南 1.1 Create one account 1.2 Create IAM Users Create 'group' firstly ...

  3. 【Python学习之十】操作数据库

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 python3.6 操作mysql数据库 1.安装pymysql模块p ...

  4. H5混合开发中android终端和ios终端常见的兼容问题2

    转自 https://www.cnblogs.com/stoneniqiu/p/6077112.html 1.ios键盘挡住输入框. setInterval(function () { if (doc ...

  5. 【神经网络与深度学习】【计算机视觉】图解YOLO

    图解YOLO 晓雷 3 个月前 YOLO核心思想:从R-CNN到Fast R-CNN一直采用的思路是proposal+分类 (proposal 提供位置信息, 分类提供类别信息)精度已经很高,但是速度 ...

  6. Module 'mysql' already loaded in Unknown on line 0解决方法

    Module 'mysql' already loaded in Unknown on line 0解决方法 直接进入php.ini 把;extension=mysql.so注释掉就好了

  7. LeetCode 328. 奇偶链表(Odd Even Linked List)

    328. 奇偶链表 328. Odd Even Linked List 题目描述 给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是 ...

  8. Jackson 动态Bean

    为了解决json字符串有很多属性, 但是不必每个属性都映射到pojo的属性. @JsonProperty : 标记一个方法是一个属性的getter或setter方法, 也即把java属性和json域关 ...

  9. UML概念模型

    UML概念模型 UML(Unified Modeling Language):统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的标准语言 面向对象程序设计 面向对象基本概念:对象.类 ...

  10. 2. 执行Spark SQL查询

    2.1 命令行查询流程 打开Spark shell 例子:查询大于21岁的用户 创建如下JSON文件,注意JSON的格式: {"name":"Michael"} ...