一，带昵称的群聊

#!/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. 爬虫的正则表达式re模块

    爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网站去搜索) 爬 (将所有的网站的内容全部爬下来) 取 (去掉对我们没用处的数据) 处理数据(按照我们想要的方式存储和使用) 对于dow ...

  2. Python3基础 二、八、十、十六进制数的定义

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  3. Tomcat 配置虚拟目录以及虚拟主机

    目录 虚拟目录 虚拟主机 虚拟目录 虚拟目录的功能 一般情况下,我们的打包后的项目都是放到tomcat/webapps目录下的,然后通过localhost:8080/project_name这个链接进 ...

  4. [LeetCode] 114. Flatten Binary Tree to Linked List 将二叉树展平为链表

    Given a binary tree, flatten it to a linked list in-place. For example, given the following tree: 1 ...

  5. 函数vs方法

    举例 python代码示例: class A(): def method_demo(): print("我是一个方法,在类内") def function_demo(): prin ...

  6. Java设置文件权限

    今天遇到一个问题: java写的API,ppt转图片生成的目录及文件 在使用php调用API完成后,再使用php进行删除时,遇到了删除失败的问题(php删除的部分  查看) 部署的环境是Ubuntu ...

  7. .Net Core使用 MiniProfiler 进行性能分析

    官方文档: https://miniprofiler.com/dotnet/AspDotNetCore 1.添加包 MiniProfiler.AspNetCore.Mvc   和    MiniPro ...

  8. AppCrawler运用总结

    一.环境 1.环境准备:安装安卓SDK + 真机 + appcrawler-2.1.3.jar 在放 appcrawler-2.1.0.jar 的文件夹下执行以下命令: 1.生成yml的demo:ja ...

  9. 怎么又出错了？盘点java中最容易出现的错误

    现如今,java已经广泛应用各种软件开发领域.基于面向对象的设计,java屏蔽了诸如C,C++等语言的一些复杂性,提供了垃圾回收机制,平台无关的虚拟机技术,Java创造了一种前所未有的开发方式.所以, ...

  10. FDD与TDD的区别

    LTE通常分为FDD LTE和TDD LTEFDD,频分双工(Frequency Division Duplexing)我和你通信,像广播一样,只能我说你听,是单工:像对讲机一样,同一时间只能一方说, ...