发送窗口震动

README.md

@@ -22,6 +22,5 @@ node server.js
 - 接收与发送消息 
 - 自定义消息字体颜色
 - 支持发送表情
-- 支持发送图片
-## 有待完成
-- 窗口震动
+- 支持发送图片 
+- 支持发送窗口震动

server.js

@@ -40,6 +40,16 @@ io.on('connection', (socket)=> {
         }
     });
 
+    // 发送窗口抖动
+    socket.on('shake', ()=> {
+        socket.emit('shake', {
+            name: '您'
+        });
+        socket.broadcast.emit('shake', {
+            name: socket.nickname
+        });
+    });
+
     // 发送消息事件
     socket.on('sendMsg', (data)=> {
         var img = '';

www/index.html

@@ -26,7 +26,9 @@
               <form action="">
                   <div class="edit"> 
                     <input type="color" id="color" value="#000000">
-                    <i title="双击取消选择" class="fa fa-smile-o" id="smile">
+                    <i title="自定义字体颜色" id="font" class="fa fa-font">
+                    </i><i title="双击取消选择" class="fa fa-smile-o" id="smile">
+                    </i><i title="单击页面震动" id="shake" class="fa fa-bolt">
                     </i>
                     <input type="file" id="file">
                     <i class="fa fa-picture-o" id="img"></i>

www/js/chat-client.js

@@ -37,6 +37,15 @@ $(function() {
       $('#messages').scrollTop($('#messages')[0].scrollHeight);
     });
 
+    // 监听抖动事件
+    socket.on('shake', (user)=> { 
+      var data = new Date().toTimeString().substr(0, 8);
+      $('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name}发送了一个窗口抖动</span></p>`);
+      shake();
+      // 滚动条总是在最底部
+      $('#messages').scrollTop($('#messages')[0].scrollHeight);
+    });
+
     // 显示在线人员
     socket.on('disUser', (usersInfo)=> {
       displayUser(usersInfo);
@@ -51,7 +60,7 @@ $(function() {
     });
 
     // 接收消息
-    socket.on('receiveMsg', (obj)=> { 
+    socket.on('receiveMsg', (obj)=> {  
       // 发送为图片
       if(obj.type == 'img') {
         $('#messages').append(`
@@ -111,6 +120,15 @@ $(function() {
       return false; 
     }
 
+    var timer;
+    function shake() {
+      $('.main').addClass('shaking');
+      clearTimeout(timer);
+      timer = setTimeout(()=> {
+        $('.main').removeClass('shaking');
+      }, 500);
+    }
+
     // 显示在线人员
     function displayUser(users) {
       $('#users').text(''); // 每次都要重新渲染
@@ -164,6 +182,11 @@ $(function() {
         $('.selectBox').css('display', "none");
     });
 
+    // 用户发送抖动
+    $('.edit #shake').click(function() {
+        socket.emit('shake');
+    });
+
     // 用户发送图片
     $('#file').change(function() {
       var file = this.files[0];  // 上传单张图片

www/style/index.css

@@ -49,6 +49,8 @@ body {
     border-radius: 10px;  
     box-shadow: 3px 5px 9px #ccc;
     background-color: rgba(255, 255, 255, 1);
+    position: relative;
+    left: 0;
 }
 .header {
     height: 85px;
@@ -84,10 +86,12 @@ body {
 }
 #messages::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
     border-radius: 5px;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: rgba(0,0,0,0.2);
 }
 #messages::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     border-radius: 0;
     background: rgba(0,0,0,0.1);
@@ -190,6 +194,7 @@ form {
 }
 .edit i {
     padding: 5px 6px;
+    cursor: pointer;
 }
 .edit i:hover {
     background-color: #e2e2e2 !important;
@@ -201,7 +206,24 @@ form {
     left: 0px;
     z-index: 3;
     background-color: #fff;
-} 
+}  
+.shaking {
+    animation: run 0.2s infinite;
+}
+@keyframes run {
+    0% {
+        left: 0;
+    }
+    25% {
+        left: -7px;
+    }
+    50% {
+        left: 7px;
+    }
+    100% {
+        left: 0;
+    }
+}
 .edit #file {
     width: 32.36px;
     height: 29px;
@@ -217,10 +239,19 @@ form {
     border: none;
     cursor: pointer;
     background: none;
+    opacity: 0;
+    position: relative;
+    z-index: 5;
 }
 #color:focus {
     outline: none;
 }
+.edit #font {
+    position: absolute;
+    left: 9px;
+    top: 3px;
+    z-index: 0;
+}
 .smile {
     width: 460px;
     height: auto;
@@ -270,28 +301,16 @@ form {
 }
 .emoji::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
     border-radius: 5px;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: rgba(0,0,0,0.2);
 }
 .emoji::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     border-radius: 0;
     background: rgba(0,0,0,0.1);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+} 
 
 textarea {
     display: block;
@@ -315,10 +334,12 @@ textarea::-webkit-scrollbar {/*滚动条整体样式*/
 }
 textarea::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
     border-radius: 5px;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: rgba(0,0,0,0.2);
 }
 textarea::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     border-radius: 0;
     background: rgba(0,0,0,0.1);