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. 关于HTTP1.1的长连接

    HTTP是一个构建在传输层的TCP协议之上的应用层的协议,在这个层的协议,是一种网络交互须要遵守的一种协议规范. HTTP1.0的短连接 HTTP 1.0规定浏览器与server仅仅保持短暂的连接.浏 ...

  2. Chrome浏览器 js 关闭窗口失效解决方法

    //获取元素ID var DelHtml = document.getElementById("imgdel"); //alert(DelHtml); //添加点击事件 DelHt ...

  3. linux内核模块依赖图

    Module                  Size  Used by btrfs                 880032  0 raid6_pq               97812  ...

  4. java线程阻塞（sleep,suspend,resume,yield,wait,notify）

    为了解决对共享存储区的访问冲突,Java 引入了同步机制,现在让我们来考察多个线程对共享资源的访问,显然同步机制已经不够了,因为在任意时刻所要求的资源不一定已经准备好了被访问,反过来,同一时刻准备好了 ...

  5. Freemarker 中的哈希表（Map）和序列（List）

    freemarlker中的容器类型有: 哈希表:是实现了TemplateHashModel或者TemplateHashModelEx接口的java对象,经常使用的实现类是SimpleHash,该类实现 ...

  6. css hack (ie6-ie9+)

    IE6 css hack: 1. *html Selector {} /* Selector 表示 css选择器 下同 */ 2. Selector { _property: value; } /* ...

  7. id、NSObject *、id<NSObject>、instancetype

    1. id 与 NSObject * (1) id 是 Objective-C 对象,但是并不一定是NSObject对象,并非所有的Foundation/Cocoa对象都是继承于NSObject对象的 ...

  8. UVA11270 Tiling Dominoes —— 插头DP

    题目链接:https://vjudge.net/problem/UVA-11270 题意: 用2*1的骨牌填满n*m大小的棋盘,问有多少种放置方式. 题解: 骨牌类的插头DP. 1.由于只需要记录轮廓 ...

  9. 正则表达式、Calendar类、SimpleDateFormat类、Date类、BigDecimal类、BigInteger类、System类、Random类、Math类(Java基础知识十四)

    1.正则表达式的概述和简单使用 * A:正则表达式(一个字符串,是规则)     * 是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. * B: ...

  10. MYSQL进阶学习笔记二：MySQL存储过程和局部变量！（视频序号：进阶_4-6)

    知识点三:MySQL存储过程和局部变量(4,5,6) 存储过程的创建:     创建存储过程的步骤: 首先选中数据库 改变分隔符,不让分号作为执行结束的标记.(通常情况下,改变分隔符命令 DELIMI ...