• 我的web聊天之---序章


    有时候自我感觉良好,人啊就开始膨胀,细细想来,自己还是那么苍白。---- 致傻傻的我

    大家都知道,平时上班总是拿着手机看看微信,看看新闻,这个不太好,这不是重点,重点是我们公司web版本的微信,QQ都上不去,这也不是重点,若我还是单身。现在有媳妇指令的时候,总是接收不到,这个不太好。

    于是就想自己写一个聊天的好了,是男人说干就干呗。

    功能需求

    1. 文本消息

    2. 消息提示,因为是web版本,如果不在当前窗前窗口的时候,需要智能提示,如果在,当然不需要

    3. 一些内置的动态表情

    4. 图片的传送,

           图片粘贴,

           图片拖拽

    5. 文件的拖拽

    6. 一对多的 图片和文件传送

    7. 支持多人聊天即多窗口聊天

    8. 语音 + 视频聊天

    实现思路

    1. 语言

    我数数我会的语言也就是C#,nodejs, java,勉强能读php,

    其实一直想用php写点啥来着,我看好php的p(飘逸),但是不是现在,

    java 不喜欢笨重的大叔,一直都很讨厌,最不喜欢的语言,没有之一,

    C#,原来的老本行,虽然用了那么久,一直基于产品的二次开发,想想自己真是个弱鸡,原来用 C#作为后台写了个pm25实时引用和在线的五子棋,可行,但是不想用了,

    2016年3月转了专门的js,至少我喜欢,就是你了- nodejs

    2. socket.io

    其实选择了nodejs,你也没得选了

    3.  消息提示

      Notification

    4. 视频聊天

     webrtc(adapter.js)

    基本上就这些了,实现的程度,也是按照需求的顺序

    虽说是连续剧,这一集,必须有点料,那就是基本的文本聊天。

    nodejs + socket.io + html5 web socket 这种聊天,太多了。我就不解释了,也不多说了。

    消息提示的逻辑依然是 如果不在当前窗口的时候,需要智能提示,如果在,当然不需要

    那么问题的重点就是,

    1. 如何判断当前窗框是不是不激活,反过来是不是被隐藏了,查看代码方法 getWindowHiddenKey,获得判断当前穿孔是不是hidden的属性名,然后document[propertyName]就可以得知是不是隐藏了

    2. 如果把消息通知给用户,这里就用到了window.Notification,他会在桌面右下角弹出一个框,显示必要的信息,图片,标题,消息正文,关闭按钮,设置按钮等

    可以参考如下文章:

    Notifications API Standard

    Notification - Web APIs | MDN

    简单了解HTML5中的Web Notification桌面通知 « 张鑫旭-鑫空间-鑫生活

    3. 如何让消息提示不消失,一直提示

    为什么这么做了,女人嘛,有时候分神,一个不小心关闭了,咋办了。

    本来是想通过设置完成的,结果查看了文档,没有找到合适的,等待高人指点哈。

    好像有个windows的设置,但是觉得这个有点麻烦用户了。

    我的思路是在关闭的时候再次打开提示框,以得以延续。

    4. 如何回到页面聊天

     这个问题,开始我也一直再想,官方文档上有答案,notification的click里面调用window.focus(),我差点怀疑自己是不是懂html和js.

    好吧,废话不多了,上代码。

    define(function (require, exports, module) {
    
        class Notify {
    
            constructor(alwaysShow = false) {
                this.supported = window.Notification != null
                this.options = {
                    renotify: true,
                    noscreen: false,
                    tag: 'jchat',
                    icon: '/img/notify_title.jpg'
                }
                this.hiddenKey = Notify.getWindowHiddenKey()
                this.alwaysShow = alwaysShow || false
                this.manualClosed = false
            }
    
            popNotify(title, options) {
                let opt = Object.assign({}, this.options, options)
                if (Notification.permission == 'granted') {
                    var notification = new Notification(title, opt)
                    this.initalizeNotification(notification, title, opt)
                }
            }
    
            initalizeNotification(notification, title, options) {
                notification.onclick = () => {
                    //返回消息窗口
                    //关闭消息框
                    this.manualClosed = true
                    notification.close()
                    window.focus()
                }
    
                notification.onclose = () => {
                    if (document[this.hiddenKey] && this.alwaysShow && !this.manualClosed) {
                        this.manualClosed = false
                        notification = new Notification(title, options)
                        this.initalizeNotification(notification, title, options)
                    }else{
                        this.manualClosed = false
                    }
                }
            }
    
            pop(title, options) {
                //若是支持并且隐藏,弹出消息
                if (this.supported && document[this.hiddenKey]) {
                    if (Notification.permission == 'granted') {
                        this.popNotify(title, options)
                    } else if (Notification.permission != 'denied') {
                        Notification.requestPermission(() => {
                            this.popNotify(title, options)
                        })
                    }
                }
            }
    
            static getWindowHiddenKey() {
                if (typeof document.hidden !== 'undefined') {
                    this.hiddenKey = 'hidden'
                } else if (typeof document.mozHidden !== 'undefined') {
                    this.hiddenKey = 'mozHidden'
                } else if (typeof document.msHidden !== 'undefined') {
                    this.hiddenKey = 'msHidden'
                } else if (typeof document.webkitHidden !== 'undefined') {
                    this.hiddenKey = 'webkitHidden'
                }
                return this.hiddenKey
            }
        }
    
        module.exports = Notify
    })
    

      

     演示地址:https://babydairy2017.cloudapp.net:8081/chat.html

  • 相关阅读:
    练习三
    练习四
    练习二
    软件生命周期
    练习一 第六题
    练习一 第五题
    练习一 第四题
    练习一 第三题
    练习一 第二题
    AngularJs模块
  • 原文地址:https://www.cnblogs.com/cloud-/p/6362749.html
Copyright © 2020-2023  润新知