0
我原本以为我无法在IE 11下工作web sockets。现在添加了大量调试细节后，我注意到了插座被正确调用。IE 11使用Spring Boot/Spring Data REST在ReactJS内通过Stompjs检索web套接字的旧版本对象
问题是，IE以某种方式返回旧数据。我注意到，在使用IE 11更新应用程序中的对象之后，无论何时它再次检索该对象时，它都不会获取最新的副本。 HTTP Header中的ETag被设置为对象的原始版本，而不是更新的对象。
这是我的例子：
1）进入主应用程序页面http://localhost:8081 此页默认加载用户页面。此页面将使用ReactJS从我的Spring应用程序加载User对象。
2）更新用户的描述，从UpdateNow到changed1。
3）这会触发一个更新并且websocket更新数据库中的用户对象。
问题 当我在IE中重新加载页面时，它显示旧数据。即使通过关闭浏览器并打开新的浏览器，它仍会显示旧数据。当启用IE调试时，我可以看到标题中的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:
这里是旧数据被加载的对象阵列，用于在第一用户内：
firstName: Aaron
lastName: Smith
description: UpdateNow (this is old in the db it is currently set to changed1)
如果我们做同样的在Chrome中，上述步骤是相同的，但我们获得当前用户对象
description: "changed1"
firstName : "Aaron"
lastName : "Smith"
我可以进一步告诉我的IE数据是不正确的，因为当我尝试对该用户进行更改时，当我去为此用户的更新执行HTTP PUT时，我会得到412预先条件失败的状态码，告诉我复制是陈旧的。
问题2 我可以在Chrome中为用户更新对象。当我这样做时，我可以看到IE更新控制台中对象的版本，但它继续检索旧版本而不是新版本的对象。
问题
为什么IE得到这个旧的数据？它看起来像是以某种方式缓存在它内部。我在浏览器中关闭了历史记录，我删除了所有内容，甚至关闭并重新打开浏览器，但它不断检索旧数据。即使我做CTRL-F5，它也会保留旧数据。
我注意到的另一个奇怪的事情是，我无法使用控制台调试在IE中查看网络主体请求/响应。它出现为This resource has no response payload data，即使在http://localhost:8081/api/users/1检索用户时，我可以看到标题获得HTTP 200。我可以查看标题，他们告诉我，ETag已经过时了，因为IE使用了原始的ETag，而不是新的ETag。
如果我在另一个客户端查看请求和响应，它看起来很好。我想知道为什么IE以某种方式继续访问旧数据。
谢谢
代码/设置：
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();
}
}