IE 11 通过 ReactJS 中的 Stompjs 和 Spring Boot/Spring 数据 REST 通过 Web 套接字检索旧版本的 object
IE 11 retrieving old version of the object with web sockets via Stompjs within ReactJS with Spring Boot/Spring Data REST
我原以为我无法 web sockets 在 IE 11 下工作。现在在添加了大量调试细节后，我注意到套接字被正确调用。
问题是 IE 以某种方式返回旧数据。我注意到，在使用 IE 11 更新应用程序中的 object 后，无论何时再次检索 object，它都不会获得最新副本。 HTTP Header 中的 ETag 设置为 object 的原始版本，而不是更新后的版本。
这是我的例子：
1) 进入申请主页面http://localhost:8081
该页面默认加载用户页面。此页面将使用 ReactJS 从我的 Spring 应用程序加载 User object。
2) 更新用户的描述，从 UpdateNow 到 changed1.
3) 这会触发更新和 websocket 以更新数据库中的用户 object。
问题
当我在 IE 中重新加载页面时，它显示旧数据。即使关闭浏览器并打开一个新浏览器，它也会继续显示旧数据。启用 IE 调试时，我可以看到 header 中的 ETag 设置为原始版本而不是更新版本。
componentDidMount() {
log("calling componentDidMount");
this.loadFromServer(this.state.pageSize);
在 IE 中返回以下内容：
loadFromServer for type users
Opening Web Socket...
loadFromServer::: objectCollection:
[object Object]{entity: Object {...}, headers: Object {...}, raw: XMLHttpRequest {...}.....
loadFromServer::: objects:
这是第一个用户在 objects 数组中加载旧数据的位置：
firstName: Aaron
lastName: Smith
description: UpdateNow (this is old in the db it is currently set to changed1)
如果我们在 Chrome 中做同样的事情，上面的步骤是相同的，但我们得到的是当前用户 object
description: "changed1"
firstName : "Aaron"
lastName : "Smith"
我可以进一步判断我的 IE 数据不正确，因为当我尝试对该用户进行更改时，当我为该用户执行 HTTP PUT 更新时，我将获得 412 前提条件失败状态代码告诉我的副本已经过时了。
问题2
我可以为用户更新 Chrome 中的 object。当我这样做时，我可以看到 IE 在控制台中更新了它的 objects 版本，但它继续检索旧版本而不是 object.
的新版本
问题
为什么 IE 会获取这些旧数据？看起来它以某种方式缓存在其中。我关闭了浏览器中的历史记录，删除了所有内容，甚至关闭并重新打开浏览器，但它不断检索旧数据。即使我按 CTRL-F5，它也会保留旧数据。
我注意到的另一件奇怪的事情是我无法使用控制台调试从 IE 中看到网络 Body Request/Response。它显示为 This resource has no response payload data，尽管我可以看到 header 在 http://localhost:8081/api/users/1 检索用户时获得 HTTP 200。我可以查看 headers，它们告诉我 ETag 对于使用原始 ETag 而不是新 ETag 的 IE 来说已经过时了。
如果我在另一个客户端中查看请求和响应，它看起来很好。我想知道 how/why IE 以某种方式继续访问旧数据。
谢谢
Code/Setup:
app.js
const stompClient = require('./websocket-listener');
.......（其他功能）
loadFromServer(pageSize, newObjectType) {
console.log("loadFromServer for type " + this.state.objectType);
var currentObjectType = this.state.objectType;
// check to see if we are refreshing the page for a new object type
if (newObjectType != null) {
log("setting new objectType of " + newObjectType);
// set the new object type for the page and refresh the results with that tyupe
currentObjectType = newObjectType;
}
follow(client, root, [
{rel: currentObjectType, params: {size: pageSize}}]
).then(objectCollection => {
console.log("loadFromServer::: objectCollection:")
console.log(objectCollection)
return client({
method: 'GET',
path: objectCollection.entity._links.profile.href,
headers: {'Accept': 'application/schema+json'}
}).then(schema => {
this.schema = schema.entity;
this.links = objectCollection.entity._links;
log("loadFromServer::: schema:")
log(schema)
return objectCollection;
});
}).then(objectCollection => {
this.page = objectCollection.entity.page;
log("loadFromServer::: objectCollection 2:")
log(objectCollection)
return this.getObjectMap(currentObjectType, objectCollection);
}).then(objectPromises => {
log("loadFromServer::: objectPromises:")
log(objectPromises)
return when.all(objectPromises);
}).done(objects => {
console.log("loadFromServer::: objects:")
console.log(objects)
this.setState({
page: this.page,
objects: objects,
attributes: Object.keys(this.schema.properties),
pageSize: pageSize,
links: this.links,
objectType: currentObjectType
});
});
}
componentDidMount() {
log("calling componentDidMount");
this.loadFromServer(this.state.pageSize);
// TODO add web socket callbacks for all entity types
stompClient.register([
{route: '/topic/newUser', callback: this.refreshAndGoToLastPage},
{route: '/topic/updateUser', callback: this.refreshCurrentPage},
{route: '/topic/deleteUser', callback: this.refreshCurrentPage},
{route: '/topic/newTestCase', callback: this.refreshAndGoToLastPage},
{route: '/topic/updateTestCase', callback: this.refreshCurrentPage},
{route: '/topic/deleteTestCase', callback: this.refreshCurrentPage},
{route: '/topic/newTestSuite', callback: this.refreshAndGoToLastPage},
{route: '/topic/updateTestSuite', callback: this.refreshCurrentPage},
{route: '/topic/deleteTestSuite', callback: this.refreshCurrentPage}
]);
}
client.js
'use strict';
var rest = require('rest');
var defaultRequest = require('rest/interceptor/defaultRequest');
var mime = require('rest/interceptor/mime');
var uriTemplateInterceptor = require('./api/uriTemplateInterceptor');
var errorCode = require('rest/interceptor/errorCode');
var baseRegistry = require('rest/mime/registry');
var registry = baseRegistry.child();
registry.register('text/uri-list', require('./api/uriListConverter'));
registry.register('application/hal+json', require('rest/mime/type/application/hal'));
module.exports = rest
.wrap(mime, { registry: registry })
.wrap(uriTemplateInterceptor)
.wrap(errorCode)
.wrap(defaultRequest, { headers: { 'Accept': 'application/hal+json' }});
网络套接字listner.js
'use strict';
var SockJS = require('sockjs-client'); // <1>
require('stompjs'); // <2>
function register(registrations) {
var socket = SockJS('/mcbserver'); // <3>
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
registrations.forEach(function (registration) { // <4>
stompClient.subscribe(registration.route, registration.callback);
});
});
}
module.exports.register = register;
package.json
"dependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"rest": "^1.3.2",
"sockjs-client": "^1.0.3",
"stompjs": "^2.3.3",
"webpack": "^1.13.0",
"when": "^3.7.7",
"react-bootstrap": "^0.29.3",
"jquery": "^2.2.3"
},
WebSocketConfiguration.java
`
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
@Component
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer {
static final String MESSAGE_PREFIX = "/topic";
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/mcbserver").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker(MESSAGE_PREFIX);
registry.setApplicationDestinationPrefixes("/app");
}
}
EventHandler.java
@Component
@RepositoryEventHandler(User.class)
public class EventHandler {
private final SimpMessagingTemplate websocket;
private final EntityLinks entityLinks;
@Autowired
public EventHandler(SimpMessagingTemplate websocket, EntityLinks entityLinks) {
this.websocket = websocket;
this.entityLinks = entityLinks;
}
@HandleAfterCreate
public void newUser(User user) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/newUser", getPath(user));
}
@HandleAfterDelete
public void deleteUser(User user) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/deleteUser", getPath(user));
}
@HandleAfterSave
public void updateUser(User user) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/updateUser", getPath(user));
}
@HandleAfterCreate
public void newTestCase(TestCase testCase) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/newTestCase", getPath(testCase));
}
@HandleAfterDelete
public void deleteTestCase(TestCase testCase) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/deleteTestCase", getPath(testCase));
}
@HandleAfterSave
public void updateTestCase(TestCase testCase) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/updateTestCase", getPath(testCase));
}
@HandleAfterCreate
public void newTestSuite(TestSuite testSuite) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/newTestSuite", getPath(testSuite));
}
@HandleAfterDelete
public void deleteTestSuite(TestSuite testSuite) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/deleteTestSuite", getPath(testSuite));
}
@HandleAfterSave
public void updateTestSuite(TestSuite testSuite) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/updateTestSuite", getPath(testSuite));
}
/**
* Take an {@link User} and get the URI using Spring Data REST's
* {@link EntityLinks}.
*
* @param user
*/
private String getPath(User user) {
return this.entityLinks.linkForSingleResource(user.getClass(), user.getId()).toUri().getPath();
}
/**
* Take an {@link TestCase} and get the URI using Spring Data REST's
* {@link EntityLinks}.
*
* @param user
*/
private String getPath(TestCase testCase) {
return this.entityLinks.linkForSingleResource(testCase.getClass(), testCase.getId()).toUri().getPath();
}
/**
* Take an {@link TestSuite} and get the URI using Spring Data REST's
* {@link EntityLinks}.
*
* @param user
*/
private String getPath(TestSuite testSuite) {
return this.entityLinks.linkForSingleResource(testSuite.getClass(), testSuite.getId()).toUri().getPath();
}
}
在 IE 11 中使用 F12 进行额外调试后，我实际上可以看到 IE 正在缓存每个 HTTP GET Request 的详细信息。然后我找到了这个指南：
https://support.microsoft.com/en-ca/kb/234067
使用以下内容更新我的 Header Requests 后，效果很好。
'Pragma': 'no-cache', 'Expires': '-1', 'cache-control': 'no-cache'
我原以为我无法 web sockets 在 IE 11 下工作。现在在添加了大量调试细节后，我注意到套接字被正确调用。
问题是 IE 以某种方式返回旧数据。我注意到，在使用 IE 11 更新应用程序中的 object 后，无论何时再次检索 object，它都不会获得最新副本。 HTTP Header 中的 ETag 设置为 object 的原始版本，而不是更新后的版本。
这是我的例子：
1) 进入申请主页面http://localhost:8081
该页面默认加载用户页面。此页面将使用 ReactJS 从我的 Spring 应用程序加载 User object。
2) 更新用户的描述，从 UpdateNow 到 changed1.
3) 这会触发更新和 websocket 以更新数据库中的用户 object。
问题 当我在 IE 中重新加载页面时，它显示旧数据。即使关闭浏览器并打开一个新浏览器，它也会继续显示旧数据。启用 IE 调试时，我可以看到 header 中的 ETag 设置为原始版本而不是更新版本。
componentDidMount() {
log("calling componentDidMount");
this.loadFromServer(this.state.pageSize);
在 IE 中返回以下内容：
loadFromServer for type users
Opening Web Socket...
loadFromServer::: objectCollection:
[object Object]{entity: Object {...}, headers: Object {...}, raw: XMLHttpRequest {...}.....
loadFromServer::: objects:
这是第一个用户在 objects 数组中加载旧数据的位置：
firstName: Aaron
lastName: Smith
description: UpdateNow (this is old in the db it is currently set to changed1)
如果我们在 Chrome 中做同样的事情，上面的步骤是相同的，但我们得到的是当前用户 object
description: "changed1"
firstName : "Aaron"
lastName : "Smith"
我可以进一步判断我的 IE 数据不正确，因为当我尝试对该用户进行更改时，当我为该用户执行 HTTP PUT 更新时，我将获得 412 前提条件失败状态代码告诉我的副本已经过时了。
问题2 我可以为用户更新 Chrome 中的 object。当我这样做时，我可以看到 IE 在控制台中更新了它的 objects 版本，但它继续检索旧版本而不是 object.
的新版本问题
为什么 IE 会获取这些旧数据？看起来它以某种方式缓存在其中。我关闭了浏览器中的历史记录，删除了所有内容，甚至关闭并重新打开浏览器，但它不断检索旧数据。即使我按 CTRL-F5，它也会保留旧数据。
我注意到的另一件奇怪的事情是我无法使用控制台调试从 IE 中看到网络 Body Request/Response。它显示为 This resource has no response payload data，尽管我可以看到 header 在 http://localhost:8081/api/users/1 检索用户时获得 HTTP 200。我可以查看 headers，它们告诉我 ETag 对于使用原始 ETag 而不是新 ETag 的 IE 来说已经过时了。
如果我在另一个客户端中查看请求和响应，它看起来很好。我想知道 how/why IE 以某种方式继续访问旧数据。
谢谢
Code/Setup:
app.js
const stompClient = require('./websocket-listener');
.......（其他功能）
loadFromServer(pageSize, newObjectType) {
console.log("loadFromServer for type " + this.state.objectType);
var currentObjectType = this.state.objectType;
// check to see if we are refreshing the page for a new object type
if (newObjectType != null) {
log("setting new objectType of " + newObjectType);
// set the new object type for the page and refresh the results with that tyupe
currentObjectType = newObjectType;
}
follow(client, root, [
{rel: currentObjectType, params: {size: pageSize}}]
).then(objectCollection => {
console.log("loadFromServer::: objectCollection:")
console.log(objectCollection)
return client({
method: 'GET',
path: objectCollection.entity._links.profile.href,
headers: {'Accept': 'application/schema+json'}
}).then(schema => {
this.schema = schema.entity;
this.links = objectCollection.entity._links;
log("loadFromServer::: schema:")
log(schema)
return objectCollection;
});
}).then(objectCollection => {
this.page = objectCollection.entity.page;
log("loadFromServer::: objectCollection 2:")
log(objectCollection)
return this.getObjectMap(currentObjectType, objectCollection);
}).then(objectPromises => {
log("loadFromServer::: objectPromises:")
log(objectPromises)
return when.all(objectPromises);
}).done(objects => {
console.log("loadFromServer::: objects:")
console.log(objects)
this.setState({
page: this.page,
objects: objects,
attributes: Object.keys(this.schema.properties),
pageSize: pageSize,
links: this.links,
objectType: currentObjectType
});
});
}
componentDidMount() {
log("calling componentDidMount");
this.loadFromServer(this.state.pageSize);
// TODO add web socket callbacks for all entity types
stompClient.register([
{route: '/topic/newUser', callback: this.refreshAndGoToLastPage},
{route: '/topic/updateUser', callback: this.refreshCurrentPage},
{route: '/topic/deleteUser', callback: this.refreshCurrentPage},
{route: '/topic/newTestCase', callback: this.refreshAndGoToLastPage},
{route: '/topic/updateTestCase', callback: this.refreshCurrentPage},
{route: '/topic/deleteTestCase', callback: this.refreshCurrentPage},
{route: '/topic/newTestSuite', callback: this.refreshAndGoToLastPage},
{route: '/topic/updateTestSuite', callback: this.refreshCurrentPage},
{route: '/topic/deleteTestSuite', callback: this.refreshCurrentPage}
]);
}
client.js
'use strict';
var rest = require('rest');
var defaultRequest = require('rest/interceptor/defaultRequest');
var mime = require('rest/interceptor/mime');
var uriTemplateInterceptor = require('./api/uriTemplateInterceptor');
var errorCode = require('rest/interceptor/errorCode');
var baseRegistry = require('rest/mime/registry');
var registry = baseRegistry.child();
registry.register('text/uri-list', require('./api/uriListConverter'));
registry.register('application/hal+json', require('rest/mime/type/application/hal'));
module.exports = rest
.wrap(mime, { registry: registry })
.wrap(uriTemplateInterceptor)
.wrap(errorCode)
.wrap(defaultRequest, { headers: { 'Accept': 'application/hal+json' }});
网络套接字listner.js
'use strict';
var SockJS = require('sockjs-client'); // <1>
require('stompjs'); // <2>
function register(registrations) {
var socket = SockJS('/mcbserver'); // <3>
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
registrations.forEach(function (registration) { // <4>
stompClient.subscribe(registration.route, registration.callback);
});
});
}
module.exports.register = register;
package.json
"dependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"rest": "^1.3.2",
"sockjs-client": "^1.0.3",
"stompjs": "^2.3.3",
"webpack": "^1.13.0",
"when": "^3.7.7",
"react-bootstrap": "^0.29.3",
"jquery": "^2.2.3"
},
WebSocketConfiguration.java
`
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
@Component
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer {
static final String MESSAGE_PREFIX = "/topic";
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/mcbserver").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker(MESSAGE_PREFIX);
registry.setApplicationDestinationPrefixes("/app");
}
}
EventHandler.java
@Component
@RepositoryEventHandler(User.class)
public class EventHandler {
private final SimpMessagingTemplate websocket;
private final EntityLinks entityLinks;
@Autowired
public EventHandler(SimpMessagingTemplate websocket, EntityLinks entityLinks) {
this.websocket = websocket;
this.entityLinks = entityLinks;
}
@HandleAfterCreate
public void newUser(User user) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/newUser", getPath(user));
}
@HandleAfterDelete
public void deleteUser(User user) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/deleteUser", getPath(user));
}
@HandleAfterSave
public void updateUser(User user) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/updateUser", getPath(user));
}
@HandleAfterCreate
public void newTestCase(TestCase testCase) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/newTestCase", getPath(testCase));
}
@HandleAfterDelete
public void deleteTestCase(TestCase testCase) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/deleteTestCase", getPath(testCase));
}
@HandleAfterSave
public void updateTestCase(TestCase testCase) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/updateTestCase", getPath(testCase));
}
@HandleAfterCreate
public void newTestSuite(TestSuite testSuite) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/newTestSuite", getPath(testSuite));
}
@HandleAfterDelete
public void deleteTestSuite(TestSuite testSuite) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/deleteTestSuite", getPath(testSuite));
}
@HandleAfterSave
public void updateTestSuite(TestSuite testSuite) {
this.websocket.convertAndSend(MESSAGE_PREFIX + "/updateTestSuite", getPath(testSuite));
}
/**
* Take an {@link User} and get the URI using Spring Data REST's
* {@link EntityLinks}.
*
* @param user
*/
private String getPath(User user) {
return this.entityLinks.linkForSingleResource(user.getClass(), user.getId()).toUri().getPath();
}
/**
* Take an {@link TestCase} and get the URI using Spring Data REST's
* {@link EntityLinks}.
*
* @param user
*/
private String getPath(TestCase testCase) {
return this.entityLinks.linkForSingleResource(testCase.getClass(), testCase.getId()).toUri().getPath();
}
/**
* Take an {@link TestSuite} and get the URI using Spring Data REST's
* {@link EntityLinks}.
*
* @param user
*/
private String getPath(TestSuite testSuite) {
return this.entityLinks.linkForSingleResource(testSuite.getClass(), testSuite.getId()).toUri().getPath();
}
}
在 IE 11 中使用 F12 进行额外调试后，我实际上可以看到 IE 正在缓存每个 HTTP GET Request 的详细信息。然后我找到了这个指南：
https://support.microsoft.com/en-ca/kb/234067
使用以下内容更新我的 Header Requests 后，效果很好。
'Pragma': 'no-cache', 'Expires': '-1', 'cache-control': 'no-cache'