WebSocket说白了就是一种全双工通信协议，跟HTTP那种请求-响应模式不同，它能保持长连接，服务器可以主动推数据给客户端。这在实时应用里特别有用，比如聊天室、股票行情或者游戏数据更新。Vue.js作为前端框架，数据响应式特性让状态管理变得简单，配合WebSocket，数据一变，视图自动更新，简直天作之合。我用的是Vue 2，不过Vue 3也差不多，核心思路一致。
这次案例我模拟了一个简单的实时股票价格展示。假设我们有个后端服务，通过WebSocket推送股票价格变化。前端用Vue来接收并显示这些数据，同时支持用户手动刷新。代码不难，重点在于怎么处理连接生命周期和错误恢复。下面一步步来。
首先，创建一个Vue项目，我用的是Vue CLI，简单快捷。安装好后，在组件里引入WebSocket。关键部分在钩子里初始化连接，在里关闭连接，避免内存泄漏。代码大致如下：
这段代码的核心是方法，它创建WebSocket连接，并设置事件监听。里解析服务器推送的数据，直接更新Vue的数组，视图就会自动刷新。错误处理和自动重连是实战中必不可少的，不然网络一波动，应用就挂了。我用了简单的定时器来实现重连，手动重连按钮也给用户多一个选择。
在实际测试时，我用了Node.js写了个简单的WebSocket服务器，用库模拟推送股票数据。服务器端代码大概这样：
这个服务器每隔2秒生成随机价格，推送给所有连接的客户端。前端Vue组件收到后，页面就会动态更新。测试时，打开浏览器，能看到价格不停变化，手动重连按钮也能在断开时恢复连接。
过程中我遇到的主要问题是连接稳定性。比如，服务器重启后，前端需要自动重连，否则数据就断了。另外，WebSocket在部分老旧浏览器上兼容性不好，可能需要降级方案，比如用SockJS。但在现代浏览器里，基本没问题。还有，数据格式最好用JSON，方便解析，避免乱码。
总的来说，Vue + WebSocket组合挺强大的，适合需要实时交互的场景。这个案例虽然简单，但扩展性不错，可以加更多功能，比如过滤特定股票、历史数据图表等。关键是理解WebSocket的生命周期和Vue的响应式机制，结合起来就能轻松搞定实时应用。如果有朋友想深入，可以试试加Vuex管理状态，或者用Vue 3的Composition API重构，代码会更简洁。好了，就分享到这，欢迎大家试试，有问题一起讨论！