vue项目列表页后端使用websocket推送数据。新增或者删除失败了即使不在这个列表页面需要给到用户相应的提示。如果用户在当前列表页面提示用户，自动改变对应的状态。正确的思路是什么样的呢？

Question

对websocket不是很了解，vue项目，有一个列表页用的是http请求的数据，可以新增或者删除，根据后台返回的数据来提示用户操作成功或者失败。现在提出的问题是新增或者删除后台给我的状态可能不是很准确。需要用到，websocket后端给我推送列表数据。用户操作的新增或者删除失败了即使不在这个列表页面需要给到用户相应的提示。如果用户在当前列表页面提示用户，自动改变对应的状态。正确的思路是什么样的呢？

Answer 1

思路很简单，先分析一下业务场景，现在你的业务场景有两种：

1. 在当前页面需要自动同步状态；
2. 不在当前页面需要通知用户；

然后就是着手实现，对于第一种业务场景这是最简单的了，解决方案有两种：

1. 全替换，后端推送什么数据，就展示什么数据；
2. 对比差异，只修改有差异的部分，这需要一定的逻辑算法思维，复杂度较高；

对于第二种业务场景，就稍微复杂一些，但是可以沿用第一种也因为场景的第二种解决方案，具体实现思路如下：

1. 拿到缓存的上次推送的列表数据；
2. 收到后端的推送数据，对比差异，根据差异不同进行对应的通知；
3. 替换缓存的列表数据为当前收到推送的列表数据；

大概思路就这么多，希望对你有所帮助

Answer 2

一般情况下，后台给你的状态必须是准确的。
不准确我是不是可以理解，新增或删除提交后，后台处理比较复杂（比如同时调用了其它第三方接口，无法及时返回结果），需要通过异步（websocket）的方式反馈给你（前端）。
思路：
1、点新增或删除后，不立即给出结果，只提示，系统正在处理。
2、当后台通过websocket反馈给你时，你再提示，新增或删除是否真的成功。
3、列表里数据的状态变更，简单的话，就刷下页面，重新从后台请求1次。也可以对具体被数据进行操作。你这里用的是vue的，数据是双向绑定的，操作了数据，状态也会自动变化的。

Answer 3

正常情况下是http请求，http返回请求结果。还有就是长连接的方式，使用websocket的send()发送消息给服务器，onmessage接收消息。

如果使用http请求，websocket接收，就只需要处理接收到的数据。让服务器告诉你新增删除的结果来处理就好了。不在当前页面提示失败的状态，在当前页修改原有的数据。

https://developer.mozilla.org...