server
# @File: ws

from flask import Flask, request, render_template

from geventwebsocket.handler import WebSocketHandler

from geventwebsocket.websocket import WebSocket  # 我用来做语法提示

from gevent.pywsgi import WSGIServer

import json

app = Flask(__name__)  # type:Flask

# 存放用户对应的，收件人，发件人，以及信息

# 可以做聊天室   {聊天室id:[], 聊天室id:[]...}

# 两个用户之间的聊天{"用户名":{信息}, "用户名":{信息}}

user_socket_dict = {}  # type:dict

@app.route('/')

def index():

    return render_template('single.html')

@app.route("/ws/<user>")

def ws(user):

    user_socket = request.environ.get('wsgi.websocket')  # type:WebSocket

    if user_socket:

        user_socket_dict[user] = user_socket

    print(len(user_socket_dict), user_socket_dict)

    while 1:

        msg = user_socket.receive()

        print(msg)  # b"{from_user:xx, to_user:xx,msg:xx}"

        msg_dict = json.loads(msg)

        to_usocket = user_socket_dict.get(msg_dict.get("to_user"))  # type:WebSocket

        to_usocket.send(json.dumps({"from_user": user, "to_user": msg_dict.get("to_user"), "msg": msg_dict.get("msg")}))

if __name__ == '__main__':

    http_server = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler)

    http_server.serve_forever()
single.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<p>您的昵称：<input type="text" id="nick">

    <button onclick="openws()">进入聊天室</button>

</p>

<p>给<input type="text" id="to_user">发送：<input type="text" id="message">

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

</p>

<div id="msg_list" style="width: 500px;">

</div>

</body>

<script type="application/javascript">

    var ws = null;

    // ws.onopen = function(){

    //   alert("欢迎来到S14群喷");

    // };

    function openws() {

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

        ws = new WebSocket("ws://192.168.12.41:5000/ws/" + nick);

        ws.onmessage = function (ws_status) {

            console.log(ws_status.data);

            var msg_obj = JSON.parse(ws_status.data);

            var ptag = document.createElement("p");

            ptag.innerText = msg_obj.from_user + " : " + msg_obj.msg;

            document.getElementById("msg_list").appendChild(ptag);

        };

    }

    function send_msg() {

        var msg = document.getElementById("message").value;

        var from_user = document.getElementById("nick").value;

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

        var ptag = document.createElement("p");

        ptag.style.cssText = "text-align: right;";

        ptag.innerText = msg + " : " + from_user;

        document.getElementById("msg_list").appendChild(ptag);

        var msg_obj = {

            msg: msg,

            from_user: from_user,

            to_user: to_user

        };

        ws.send(JSON.stringify(msg_obj));

    };

</script>

</html>

websocket实现单聊的更多相关文章

  1. websocket 实现单聊群聊 以及 握手原理+加密方式

    WebSocket 开始代码 服务端 群聊 # type:WebSocket 给变量标注类型 # websocket web + socket from geventwebsocket.server ...

  2. flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密

    1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...

  3. 基于websocket的单聊.群聊

    关于ai.baidu.com的 代码: #########################################核心代码################################### ...

  4. 使用websocket实现单聊和多聊

    单聊: 前端: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv=& ...

  5. WebSocket群聊与单聊

    一 . WebSocket实现群聊 py文件代码 # py文件 from flask import Flask, render_template, request from geventwebsock ...

  6. websocket 群聊单聊

    websocket 介绍 介绍引自 https://segmentfault.com/a/1190000012709475 群聊 from flask import Flask, request, r ...

  7. websocket 群聊,单聊,加密,解密

    群聊 from flask import Flask, request, render_templatefrom geventwebsocket.handler import WebSocketHan ...

  8. Websocket实现群聊、单聊

    Websocket 使用的第三方模块:gevent-websocket 群聊 ws群聊.py中的内容 from flask import Flask, request, render_template ...

  9. 如何用WebSocket实现一个简单的聊天室以及单聊功能

    百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...

随机推荐

  1. 让 Logo "飞" 出屏幕

    让 Logo "飞" 出屏幕   推荐序 本文介绍了一种思路,即利用矢量工具来生成动画的关键代码,然后进一步制作成完整的动画效果,感谢作者授权转载. 作者介绍:一缕殇流化隐半边冰霜 ...

  2. angularjs学习之八（angularjs中isolate scope的使用）

    angular js中指令directive有个特别实用的东西,那就是 isolate scope (被隔离的scope) 关于详细他和全局的scope 有什么差别.能够參考以下这篇博文: Angul ...

  3. 浅谈JavaScript的事件（事件流）

     事件流描述的是从页面中接收事件的顺序.IE的事件流失事件冒泡,而Netspace的事件流失事件捕获. 事件冒泡 IE的事件流叫事件冒泡,即事件开始时,由具体的元素(文档中嵌套层次最深的节点)接收,然 ...

  4. asp对中文编码及解码,Decode和Encode中文网址处理

    <%'-------------------------------------------------------------------------- '================== ...

  5. [翻译]理解Unity的自动内存管理

    当创建对象.字符串或数组时,存储它所需的内存将从称为堆的中央池中分配.当项目不再使用时,它曾经占用的内存可以被回收并用于别的东西.在过去,通常由程序员通过适当的函数调用明确地分配和释放这些堆内存块.如 ...

  6. POJ1759 Garland —— 二分

    题目链接:http://poj.org/problem?id=1759 Garland Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  7. YTU 2866: 结构体---点坐标结构体

    2866: 结构体---点坐标结构体 时间限制: 1 Sec  内存限制: 128 MB 提交: 499  解决: 344 题目描述 定义一个表示点坐标的结构体,输入两个点的坐标,输出这两个点中点的坐 ...

  8. java如何判断字符串是否为空（小知识）

    方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: 比较字符串长度, 效率高, 是我知道的最好一个方 ...

  9. 开发工具、Object类(java基础知识十一)

    1.常见开发工具介绍 * A:操作系统自带的记事本软件 * B:高级记事本软件 * C:集成开发环境 IDE     * (Integrated Development Environment) *  ...

  10. NOIP2008题解

    传送门 考查题型 二分图 暴力枚举 判断素数 dp T1 传纸条 题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和 ...