WebSocket 实现数据实时刷新

webSocket 是html5的一个新协议,WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket aPI 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

一、浏览器客户端

创建一个WebSocket 对象

浏览器通过 javascript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

微信小程序创建一个 WebSocket 连接稍有不同,具体可以参考小程序文档

WebSocket 属性

假定我们刚使用了以上代码创建了 Socket 对象,可以通过ws.readyState查看链接的状态

WebSocket 事件

当你获取 Web Socket 连接后,你可以通过send()方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据等。

WebSocket 方法

客户端和服务器端的 WebSocket 连接建立起来后,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接

二、服务端

我们用本地电脑使用node搭建一个WebSocket服务器, 示例模拟随机生成数据向客户端不间断传递数据

1、搭建WebSocket服务器

①新建 nodeServer 文件夹
②用命令行 npm init 在当前文件夹内进行初始化,随即生成package.json文件

③在使用nodejs搭建WebSocket 时需要用到WebSocket 模块,因此要安装ws模块,
装好之后可以在package.json文件中查看有无安装成功

④在当前文件夹内新建index.js文件, 在index.js中引入依赖并创建WebSocket 服务器
当前WebSocket 服务器只为了模拟数据使用并未加密使用wss协议等

⑤启用WebSocket 服务器,在nodeServer文件夹下使用命令node index.js启用,使用键盘’ctrl+c’停止

⑥当前本地WebSocket 服务器的路径则是'ws://localhost:8088'或者'ws://127.0.0.1:8088'

2、服务端–模拟随机生成数据向客户端不间断传递数据

情景模拟:将腾讯、百度、阿里股票实时信息发送给客户端。
先默认初始三只股票值,然后通过定时器将股票值随机增减生成新的值发送给客户端

通过node index.js命令启动服务器可查看服务器端打印结果

WebSocket 实现数据实时刷新
打印结果
3客户端–建立WebSocket 实现数据实时刷新

建立连接后客户端可查看输出结果

WebSocket 实现数据实时刷新
输出结果
未经允许不得转载:一点博客-青梅煮码-共享博客 » WebSocket 实现数据实时刷新
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏