如何提升单页应用的体验

想起公司里的domeos项目，angularjs单页应用。

其实还有很多问题，可以优化。

1.轮询 vs websocket数据推送

举个例子：

假设，项目中有一个用户A，他对项目有读写权限。

这会儿，当A用户正在修改项目的一些配置时（只有写权限的人才能修改项目配置），master用户把A用户的权限修改成了只读权限。

A用户对项目的修改就失败了，弹出模态框“对不起，您没有权限。”。然后页面切换到权限管理页面。

我们之前的项目也可以实现上述功能。我们使用的是每4s获取一次userlist表，更新页面状态。

例如：

//每隔4000ms就获取一次data
var timeout = void 0,var freshBuildList = function freshBuildList() {
            if (timeout) {
                $timeout.cancel(timeout);
            }
            loadBalancerService.getData().then(function (res) {
                _this.loadBalancerList = res.data.result || [];
            }).finally(function () {
                timeout = $timeout(freshBuildList,4000);
            });
        };

也就是说，每隔4s，都要与服务器建立一个tcp连接。如果用户数量很大，服务器的负载很高呀。

html5的websocket可以实现后台数据推送。让后台数据更新的时候，不需要前台请求。后台直接去推送数据，大大减轻了服务器的负载。然而，websocket需要使用ws协议代替http协议。

（1）socket.io

这里有一个socket.io。它是一个websocket api。
Socket.IO还提供了一个NodeJS API，它看起来非常像客户端API。

客户端：

先把socket.io引入到页面中

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

然后就可以使用啦。

// 创建Socket.IO实例，建立连接
var socket= new io.Socket('localhost',{ 
  port: 8080 
}); 
socket.connect(); 

// 添加一个连接监听器
socket.on('connect',function() { 
  console.log('Client has connected to the server!'); 
});

// 添加一个消息监听器
socket.on('message',function(data) { 
  console.log('Received a message from the server!',data); 
});

// 添加一个关闭连接的监听器
socket.on('disconnect',function() { 
  console.log('The client has disconnected!'); 
}); 

// 通过Socket发送一条消息到服务器
function sendMessageToServer(message) { 
  socket.send(message); 
}

这里，socket.io为不同的协议封装了相同的api接口。
包括：
WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling

服务端：
node.js端 socket-server.js

// 需要HTTP 模块来启动服务器和Socket.IO
var http= require('http'),io= require('socket.io'); 

// 在8080端口启动服务器
var server= http.createServer(function(req,res){ 
  // 发送HTML的headers和message
  res.writeHead(200,{ 'Content-Type': 'text/html' }); 
  res.end('<h1>Hello Socket Lover!</h1>'); 
}); 
server.listen(8080); 

// 创建一个Socket.IO实例，把它传递给服务器
var socket= io.listen(server); 

// 添加一个连接监听器
socket.on('connection',function(client){ 

  // 成功！现在开始监听接收到的消息
  client.on('message',function(event){ 
    console.log('Received message from client!',event); 
  }); 
  client.on('disconnect',function(){ 
    clearInterval(interval); 
    console.log('Server has disconnected'); 
  }); 
});

在命令行输入

node socket-server.js

现在客户端和服务器都能来回推送消息了！在NodeJS脚本内，可以使用简单的JavaScript创建一个定期消息发送器：

// 创建一个定期（每5秒）发送消息到客户端的发送器
var interval= setInterval(function() { 
  client.send('This is a message from the server! ' + new Date().getTime()); 
},5000);

服务器端将会每5秒推送消息到客户端！

为了socket.io，还要在中间架设一层node.js。感觉开发难度会变大呢。不过带给用户的体验会变好很多。

2.断线重连

如果不适用websocket机制，而是使用每隔4s去服务器get数据的方式，就没有断线重连的苦恼了。

因为，每隔4s都做了断线重连的事情。

那么，使用websocket之后，怎么实现断线重连捏？

就是在客户端关闭连接的时候，去reconnect

// 添加一个关闭连接的监听器
socket.on('disconnect',function() { 
  console.log('The client has disconnected!'); 
  reconnect();
}); 

function reconnect(){
  setTimeout(function(){
       //重连
  },5000);
}

网上的大大是这么说的。不知道会出现什么其他的问题。。。

3.本地缓存

现在我们在填写一个form的时候，还没有提交之前，网断了。但是表单的数据不应该清零，而应该保存在本地，用户刷新一次页面，填写的数据还在。

localstorage 或者 sessionstorage来存储。

4.表单多次提交

项目之前在针对表单多次提交的问题时，还没有不错的解决方案也。

前几天注意到，在github创建一个项目的时候，在国内网速慢一些，点击提交按钮之后很长时间才能刷新页面显示提交之后的页面。

在这期间，github的提交按钮由可点击变为不可点击，内容由“提交”变为“提交connecting”。

后台的实现思路可能是，未收到服务器响应之前，就设置按钮不可点击。给一个用户友好的提示，知道受到响应，然后跳转。