有時候自我感覺良好，人啊就開始膨脹，細細想來，自己還是那么蒼白。---- 致傻傻的我

?

大家都知道，平時上班總是拿著手機看看微信，看看新聞，這個不太好，這不是重點，重點是我們公司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 != nullthis.options = {renotify: true,noscreen: false,tag: 'jchat',icon: '/img/notify_title.jpg'}this.hiddenKey = Notify.getWindowHiddenKey()this.alwaysShow = alwaysShow || falsethis.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 = truenotification.close()window.focus()}notification.onclose = () => {if (document[this.hiddenKey] && this.alwaysShow && !this.manualClosed) {this.manualClosed = falsenotification = 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

總結

以上是生活随笔為你收集整理的我的web聊天之---序章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。