增加掉线重连，变更判断规则

flxxyz · Oct 25, 2017 · 023c8c2 · 023c8c2
1 parent e779dcf
commit 023c8c2
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 1,591 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 flxxyz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ composer update
    $config['base_url'] = "你的域名";
    ```
 
-2. 修改`ci/static/js/chat.js` **129行**为websocket链接🔗
+2. 修改`ci/static/js/chat.js` **137行**为websocket链接🔗
    ```javascript
    const socket = new WebSocket('ws://你的域名:9501');
    ```

diff --git a/ci/application/views/Chat/room.php b/ci/application/views/Chat/room.php
@@ -11,6 +11,7 @@
     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
     <script src="/static/js/OwO.js"></script>
     <script src="/static/js/chat.js"></script>
+    <script src="/static/js/Reconnect.js"></script>
 </head>
 <body>
 <header id="chat-header">
@@ -36,7 +37,7 @@
 <footer id="chat-footer">
     <div class="chat-input">
         <textarea class="message" type="text"></textarea>
-        <button class="btn" type="button">发送</button>
+        <button class="btn n" type="button">发送</button>
     </div>
     <div class="chat-more">
         <div class="OwO"></div>
@@ -55,7 +56,7 @@
 </footer>
 
 <script>
-    const user = {
+    var user = {
         id: '<?= $sess['id'] ?>',
         name: '<?= $sess['name'] ?>',
         sex: '<?= $sess['sex'] ?>',

diff --git a/ci/static/js/Reconnect.js b/ci/static/js/Reconnect.js
diff --git a/ci/static/js/chat.js b/ci/static/js/chat.js
@@ -23,7 +23,7 @@ $(function() {
     }
 
     function selfMessage(id) {
-        if (data.id == parseInt(id)) {
+        if (user.id == parseInt(id)) {
             return 'chat-me';
         }
         return 'chat-ta';
@@ -50,11 +50,19 @@ $(function() {
     }
 
     function send(message, type = 'message') {
+        if(message != '') {
+            $('.message').val('');
+            $('.btn').attr('class', 'btn n');
+        }else {
+            $('.message').focus();
+            return;
+        }
+
         var $data = {
             message: message,
             type: type,
         };
-        $('.message').val('');
+
         if(socket.readyState === 3) {
             alert('连接服务器失败，请联系管理员开启~');
             return;
@@ -126,13 +134,9 @@ $(function() {
         })
     }, 600)
 
-    const socket = new WebSocket('ws://127.0.0.1:9501');
+    var socket = new ReconnectingWebSocket('ws://127.0.0.1:9501', null, {debug: true, reconnectInterval: 2000, timeoutInterval: 3000});
 
     socket.addEventListener('open', function (event) {
-        if(socket.readyState === 3) {
-            alert('连接服务器失败，请联系管理员开启~');
-            return;
-        }
         if(!user.id) {
             return;
         }
@@ -147,9 +151,13 @@ $(function() {
         }
         user.type = 'init';
         socket.send(JSON.stringify(user));
-    });
+    })
 
     socket.addEventListener('message', function (event) {
+        if(socket.readyState === 1 && lowConnect) {
+            //alert('欢迎回来👏');
+        }
+
         var $data = JSON.parse(event.data);
         var $message = $data.message;
         if ($data.type === 'tips') {
@@ -171,19 +179,16 @@ $(function() {
         }
     })
 
+    var lowConnect = false;
     socket.addEventListener('close', function (event) {
-        //console.log(event);
-        if(socket.readyState === 3) {
+        if(socket.readyState === 0 && lowConnect) {
+            alert('连接服务器失败，请联系管理员开启~');
+        }else if(socket.readyState === 0) {
             alert('服务器关闭，断开连接辣~');
-            return '';
         }
     })
 
     socket.addEventListener('error', function (event) {
-        //console.log(event);
-        if(socket.readyState === 3) {
-            alert('服务器开小差了，刷新试试咩~');
-            return false;
-        }
+        lowConnect = true;
     })
 })
diff --git a/resource/README.md b/resource/README.md