1.app.py

#!/usr/bin/env python

# -*- coding:utf-8 -*-

import uuid

import json

import tornado.ioloop

import tornado.web

import tornado.websocket

class IndexHandler(tornado.web.RequestHandler):

    def get(self):

        self.render('index.html')

class ChatHandler(tornado.websocket.WebSocketHandler):

    # 用户存储当前聊天室用户

    waiters = set()

    # 用于存储历时消息

    messages = []

    def open(self):

        """

        客户端连接成功时，自动执行

        :return:

        """

        ChatHandler.waiters.add(self)

        uid = str(uuid.uuid4())

        self.write_message(uid)

        for msg in ChatHandler.messages:

            content = self.render_string('message.html', **msg)

            self.write_message(content)

    def on_message(self, message):

        """

        客户端连发送消息时，自动执行

        :param message:

        :return:

        """

        msg = json.loads(message)

        ChatHandler.messages.append(msg)

        for client in ChatHandler.waiters:

            content = client.render_string('message.html', **msg)

            client.write_message(content)

    def on_close(self):

        """

        客户端关闭连接时，，自动执行

        :return:

        """

        ChatHandler.waiters.remove(self)

def run():

    settings = {

        'template_path': 'templates',

        'static_path': 'static',

    }

    application = tornado.web.Application([

        (r"/", IndexHandler),

        (r"/chat", ChatHandler),

    ], **settings)

    application.listen(8888,address='0.0.0.0')

    tornado.ioloop.IOLoop.instance().start()

if __name__ == "__main__":

    run()

2.message.html

<div style="border: 1px solid #dddddd;margin: 10px;">

    <div>游客{{uid}}</div>

    <div style="margin-left: 20px;">{{message}}</div>

</div>

3.index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Python聊天室</title>

</head>

<body>

    <div>

        <input type="text" id="txt"/>

        <input type="button" id="btn" value="提交" onclick="sendMsg();"/>

        <input type="button" id="close" value="关闭连接" onclick="closeConn();"/>

    </div>

    <div id="container" style="border: 1px solid #dddddd;margin: 20px;min-height: 500px;">

    </div>

    <script src="/static/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">

        $(function () {

            wsUpdater.start();

        });

        var wsUpdater = {

            socket: null,

            uid: null,

            start: function() {

                var url = "ws://192.168.20.200:8888/chat";

                wsUpdater.socket = new WebSocket(url);

                wsUpdater.socket.onmessage = function(event) {

                    if(wsUpdater.uid){

                        wsUpdater.showMessage(event.data);

                    }else{

                        wsUpdater.uid = event.data;

                    }

                }

            },

            showMessage: function(content) {

                $('#container').append(content);

            }

        };

        function sendMsg() {

            var msg = {

                uid: wsUpdater.uid,

                message: $("#txt").val()

            };

            wsUpdater.socket.send(JSON.stringify(msg));

        }

</script>

</body>

</html>

4.引入jQuery

tornado websocket聊天室的更多相关文章

  1. WebSocket聊天室demo

    根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...

  2. Netty入门（一）之webSocket聊天室

    一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...

  3. 使用.NET Core和Vue搭建WebSocket聊天室

    博客地址是:https://qinyuanpei.github.io.  WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...

  4. 用Java构建一个简单的WebSocket聊天室

    前言 首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...

  5. websocket聊天室

    目录 websocket方法总结 群聊功能 基于websocket聊天室(版本一) websocket方法总结 # 后端 3个 class ChatConsumer(WebsocketConsumer ...

  6. php +html5 websocket 聊天室

    针对内容比较长出错,修改后的解码函数 和 加码函数 原文请看上一篇 http://yixun.yxsss.com/yw3104.html function uncode($str,$key){ $ma ...

  7. koa2+webSocket 聊天室

    做了一个简单的的聊天室,用来看看 koa和 websocket的使用还是挺好的,已经放到gitHub. https://github.com/zhaowanhua/koa2WebSocket

  8. 实现一个简单的WebSocket聊天室

    WebSocket 简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主 ...

  9. 基于springboot的websocket聊天室

    WebSocket入门 1.概述 1.1 Http #http简介 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0. #http1.0/1.1/2.0 1.HTT ...

随机推荐

  1. Java 9 中的 9 个新特性你知道吗

    摘要: Java 8 发布三年多之后,即将快到2017年7月下一个版本发布的日期了. 你可能已经听说过 Java 9 的模块系统,但是这个新版本还有许多其它的更新. 这里有九个令人兴奋的新功能将与 J ...

  2. HTMLTestRunner 美化版本

    前言 ​最近小伙伴们在学玩python,,看着那HTMLTestRunner生成的测试报告,左右看不顺眼,终觉得太丑.搜索了一圈没有找到合适的美化报告,于是忍不住自已动手进行了修改,因习惯python ...

  3. Python内置模块之time模块

    1:概述 时间表示的分类 时间戳 格式化的时间字符串 结构化时间 时间戳:时间戳表示的是从1970年1月1日整0点到目前秒的偏移量,数据类型是浮点型,主要用来让计算机看的 格式化的时间字符串:如 20 ...

  4. IDEA部署项目和多余的项目删掉的演示

  5. python datetime.datetime is not JSON serializable

    1.主要是python  list转换成json时对时间报错:datetime.datetime(2014, 5, 23, 9, 33, 3) is not JSON serializable. 2. ...

  6. java.net.ConnectException: Call From slaver1/192.168.19.128 to slaver1:8020 failed on connection exception: java.net.ConnectException: Connection refused; For more details see: http://wiki.apache.org

    1:练习spark的时候,操作大概如我读取hdfs上面的文件,然后spark懒加载以后,我读取详细信息出现如下所示的错误,错误虽然不大,我感觉有必要记录一下,因为错误的起因是对命令的不熟悉造成的,错误 ...

  7. Idea的快捷键，瞎摸索，开心就好，哈哈哈

    前言:如果你有强迫症,换了一个编辑器,最痛苦莫过于快捷键,不顺手了.这里自己瞎摸索的快捷键,贴一下,这里主要以实际应用为主,因为大量介绍的网上已经很多很多,So基本的不再叙述. 分享一下比较不错的Id ...

  8. 「BZOJ3791」作业

    题解: 比正解的做法要复杂 正解直接确定了最多有2k-1段 并且可以证明2k-1是一定可以覆盖的 于是可以直接dp 我的想法是先覆盖一段黑的,然后白的覆盖上去 所以f[i][0/1/2][0/1/2] ...

  9. sed 简单修改配置文件ip地址

    sed -i 's/old ip/new ip/g' file.txt

  10. 【Android】Android 代码判断当前设备是否为模拟器

    [Android]Android 代码判断当前设备是否为模拟器 方法比较简单,直接粘贴代码 //判断当前设备是否是模拟器.如果返回TRUE,则当前是模拟器,不是返回FALSE public stati ...