标签: single-page-application

Websocket:在页面重新加载后维护用户会话

我有一个简单的单页应用程序,使用jetty websockets进行服务器和客户端之间的通信.

问题:每次重新加载页面时,我的websocket连接都被禁用,并且new被初始化.问题是用户应该重新刷新每个页面刷新.

问题: 如何在页面刷新时消除重新登录的需要?

编辑:面临下一个问题:如何决定何时删除会话?我在服务器端有一个对等对象,除了websocket会话容器之外别无其他.Peer在onClose方法上被删除,而方法又在删除客户端websocket上调用.这里的问题来了:当用户按F5 - >客户端websocket被破坏 - >服务器删除相应的websocket - >客户端尝试重新加载页面并检查是否有任何会话和找不到.另一方面,我根本不能停止删除同伴(会话).

问题:如何告诉服务器何时删除我的同行?

javascript java java-ee websocket single-page-application

2
推荐指数
1
解决办法
4867
查看次数

当页面刷新或深度链接时,angular-ui-router不满足状态解析承诺

使用AngularJS 1.2.16,ui-router和Restangular(对于API服务),我有一个带有子状态的抽象状态,它使用多个视图.子视图接受URL参数(通过$ stateParams)以及根据通过URL传递的给定ID从API获取记录的决心.

当您在整个站点中导航时,一切都很完美,但是如果您在给定页面上并刷新它(Command/Ctrl + r或单击刷新按钮)或通过点击带有ID的深层链接直接加载页面(这是更重要的问题)API服务被请求命中,但承诺永远不会完成解析,因此数据不可用于状态,控制器,模板等.

根据ui-router的文档,在所有promise都解决之前,不应该实例化控制器.我在Google和SO中搜索过高低,阅读了AngularJS,Restangular和ui-router文档,以及大量的博客,并尝试了我知道的每一次迭代来解决这个问题,找不到任何指向解决方案的内容.

这是有问题的代码:

company.js(控制器代码)

angular.module('my.company', ['ui.router', 'CompanySvc'])

.config(['$stateProvider', function config ($stateProvider) {
  $stateProvider
    .state('company', {
      abstract: true,
      url: '/company',
      data: {
        pageTitle: 'Company'
      },
      views: {
        'main': {
          templateUrl: 'company/companyMain.tpl.html'
        }
      }
    })
    .state('company.landing', {
      url: '/{id}',
      views: {
        'summary': {
          controller: 'CompanyCtrl',
          templateUrl: 'company/companyDetails.tpl.html'
        },
        'locations': {
          controller: 'CompanyCtrl',
          templateUrl: 'company/companyLocations.tpl.html'
        }
      },
      resolve: {
        companySvc: 'CompanySvc',
        // Retrieve a company's report, if the id is present
        company: ['$log', '$stateParams', 'companySvc', function ($log, …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs single-page-application restangular angular-ui-router

2
推荐指数
1
解决办法
3505
查看次数

如果我的网站在SPA中开发,谷歌会否惩罚搜索引擎的预渲染服务?

我曾经多次说过"如果你想要SEO,你就不应该在SPA中开发你的网站".

有人告诉我,如果您的SPA index.html向最终用户返回空白,如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script type="text/javascript" src="startup.js"></script>
    </head>
    <body>

    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

并且您为搜索引擎使用预呈现服务,爬虫将检索完整呈现的html内容.这意味着最终用户获取和爬虫获取的html内容是不同的.

如果我们这样做,我的网站将受到谷歌的惩罚.

有人可以给我一份关于此的官方文件吗?

seo single-page-application

2
推荐指数
1
解决办法
494
查看次数

如何配置 nginx 为单页应用程序的其他所有内容提供静态文件和 index.html

我正在构建一个使用 nginx 作为 Web 服务器来提供静态文件的 SPA。我需要一种方法来为根 index.html 文件提供一些路由:

  • /温泉/路线
  • /其他/
  • /测试
  • /另一个/

但仍然允许提供静态文件。

我尝试了很多方法,但没有一个成功。

nginx single-page-application

2
推荐指数
1
解决办法
6780
查看次数

Asp.net 核心中的 SPA 预渲染?

我如何在 asp.net core 中实现 prerenderio,用于 angular spa。或者asp.net核心有什么方法可以做到这一点。实际上,我正在将旧的 asp.net 迁移到 asp.net 核心。

prerender angularjs single-page-application asp.net-core

2
推荐指数
1
解决办法
2334
查看次数

优化网页上的视频加载

我有一个单页应用程序,其中每个部分都包含多个视频标签。窗口的高度是截面的高度。每个标签都有不同的 MP4 格式的视频。我想在不影响页面加载时间的情况下快速加载这些视频,所以我尝试使用 jquery 通过延迟加载来加载它。但问题是视频文件的大小为 5MB,加载需要时间。是否有任何其他可能的方式在页面加载时加载我的第一部分视频并在页面加载完成后休息或作为后台进程而不向用户显示。

我正在为我的单页应用程序使用 fullpage js。它有延迟加载的未来,我正在使用它来加载我的视频内容。就像我之前说的,每个视频的文件大小为 5Mb。这是在我的单页应用程序中使用的代码。

<video>
  <source data-src="video.mp4" type="video/mp4" />
</video>
Run Code Online (Sandbox Code Playgroud)

jquery lazy-loading html5-video single-page-application fullpage.js

2
推荐指数
1
解决办法
5355
查看次数

多个SPA的S3和CloudFront网站托管根据URL路径重定向到不同的index.html

我有一个用于多个“单页应用程序”的S3存储桶,并为此存储桶启用了静态网站托管。存储桶具有以下文件夹和文件(firstApp和secondApp是文件夹,对应于不同的SPA):

firstApp
    index.html
    *.js & *.css files
secondApp
    index.html
    *.js & *.css files
Run Code Online (Sandbox Code Playgroud)

我还在S3存储桶的前面设置了CloudFront,默认的根对象设置为index.html。现在cloud-front-url/firstApp/显示器index.html从firstApp SPA和cloud-front-url/secondApp显示index.html来自secondApp。

我需要index.html根据URL路径将所有不正确的请求重定向到针对特定应用程序的不同请求,例如,如果有人请求cloud-front-url/firstApp/non-existing-path,则应将其index.html从firstApp 重定向至对第二应用程序的类似行为。

我知道如何设置CloudFront将所有404错误重定向到一个index.html

select distribution > Error Pages > Create custom error response:
* Http error code: 404
* Error Caching Minimum TTL (seconds) : 0
* Customize response: Yes
* Response Page Path : /firstApp/index.html
* HTTP Response Code: 200
Run Code Online (Sandbox Code Playgroud)

CloudFront是否可以index.html根据请求的路径将404错误重定向到其他错误(重定向到index.htmlfirstApp或secondApp文件夹中)?

redirect amazon-s3 amazon-web-services amazon-cloudfront single-page-application

2
推荐指数
1
解决办法
773
查看次数

Angular 默认子路由未加载父组件

我正在构建一个 angular 5 应用程序,但在玩路线时遇到了麻烦......

我有 2 个主布局,每个布局都有如下子路由:

SiteLayoutComponent - HomeComponent AppLayoutComponent - ContactComponent

我的问题是默认路由,当应用程序第一次加载时,使用空 URL,路由器必须重定向到 Home 组件,它有子路由“SiteLayoutComponent”,这里的问题是它只加载了 HomeComponent 但不是具有<navbar-component>. 它仅在浏览器中输入 /home 时有效。以下是我的路线:

const appRoutes: Routes = [

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
},
//Site routes goes here        
{
    path: 'home',
    component: SiteLayoutComponent,
    children: [
        { 
            path: '', 
            component: HomeComponent 
        }
    ]
},
//App routes goes here
{
    path: 'app',
    component: AppLayoutComponent,
    children: [
        { path: 'contact', component: ContactComponent }
    ]
},
//No layout routes    
{
    path: …
Run Code Online (Sandbox Code Playgroud)

single-page-application angular-routing angular-components angular

2
推荐指数
1
解决办法
4570
查看次数

在同一个域上组织和部署多个 SPA

想象一下,公司ABC有两个团队开发两种SPA应用:app1app2

每个应用程序都有自己index.html和关联的静态资产,例如:build/index.html main.js

这是从运行:host1。应用程序遵循相同的约定

我们想:

  • abc.com/app1 路由到 host1
  • abc.com/app2 路由到 host2

假设有一个负载平衡器设置来正确执行路由。对于这种情况,我有什么解决方案?

我尝试使用https://github.com/zeit/serve(由create-react-app建议),但有很多问题。

首先,rewritePath功能不起作用(完全没有做任何有用的事情)

其次,我尝试将我的静态资产在主机上更深一层,请求host1/app1是目录列表而不是index.html页面

即使通过配置解决了这些问题,React Router(SPA 路由器)和身份验证回调仍然存在大量问题

这种情况的实际最佳实践是什么?我想这是一个非常常见的场景。正如我所看到的,AWS 的 Web 控制台使用类似的方法来路由应用程序

router single-page-application reactjs

2
推荐指数
1
解决办法
1617
查看次数

如何在不使用任何 HTTP 服务器的情况下从本地文件 url ("file:///") 访问 react-app build?

我的要求是我必须通过加载本地文件 URL 来使用我的 react SPA,如下所示

file:///C:/react/build/index.html
Run Code Online (Sandbox Code Playgroud)

不使用任何 HTTP 服务器。

在这种情况下,它与 HTTP 服务器正常工作,但在本地文件 URL 访问的情况下,只有初始组件正常工作,但路由不工作。

它在 chrome 中给出了以下类型的错误 -

未捕获的 DOMException:无法在“History”上执行“pushState”:无法在来源为“null”且 URL 为“file”的文档中创建 URL 为“file:///C:/react/build/Aboutus”的历史状态对象:///C:/react/build/index.html'。

在 Firefox 中——

SecurityError:操作不安全。1.d30e17d6.chunk.js:1 push/< createBrowserHistory.js:153 confirmTransitionTo createTransitionManager.js:33 push createBrowserHistory.js:146 e/i.handleClick Link.js:99 p/< react-dom.production.min。 js:49 p react-dom.production.min.js:45 p/< react-dom.production.min.js:73 p react-dom.production.min.js:72 S react-dom.production.min。 js:168 E react-dom.production.min.js:158 j react-dom.production.min.js:232 Tn react-dom.production.min.js:1712 Za react-dom.production.min.js: 5451 Dt react-dom.production.min.js:660 Sn react-dom.production.min.js:1754 Fa react-dom.production.min.js:5479 Cn react-dom.production.min.js:1731 Cn自托管:1018:17

请给我一些解决方案或给我一些示例代码。并且请不要建议使用任何 HTTP 服务器方法,因为在这种情况下,我必须在不使用任何 HTTP 服务器的情况下执行此操作。

我在 react-router v4 中使用 create-react-app 方法

javascript single-page-application reactjs react-router

2
推荐指数
1
解决办法
3016
查看次数