websocket有什么用-mile米乐体育

这篇文章将为大家详细讲解有关websocket有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

什么是websocket

定义

websocket是一个持久化的网络通信协议，可以在单个 tcp 连接上进行全双工通讯，没有了request和response的概念，两者地位完全平等，连接一旦建立，客户端和服务端之间实时可以进行双向数据传输

关联和区别

• http

1. http是非持久的协议，客户端想知道服务端的处理进度只能通过不停地使用 ajax进行轮询或者采用 long poll 的方式来，但是前者对服务器压力大，后者则会因为一直等待response造成阻塞

2. 虽然http1.1默认开启了keep-alive长连接保持了这个tcp通道使得在一个http连接中，可以发送多个request，接收多个response，但是一个request只能有一个response。而且这个response也是被动的，不能主动发起。

3. websocket虽然是独立于http的一种协议，但是websocket必须依赖 http 协议进行一次握手(在握手阶段是一样的)，握手成功后，数据就直接从 tcp通道传输，与 http 无关了，可以用一张图理解两者有交集，但是并不是全部。

• socket

1. socket也被称为套接字，与http和websocket不一样，socket不是协议，它是在程序层面上对传输层协议（可以主要理解为tcp/ip）的接口封装。可以理解为一个能够提供端对端的通信的调用接口（api）

2. 对于程序员而言，其需要在 a 端创建一个 socket 实例，并为这个实例提供其所要连接的 b 端的 ip 地址和端口号，而在 b 端创建另一个 socket 实例，并且绑定本地端口号来进行监听。当 a 和 b 建立连接后，双方就建立了一个端对端的 tcp 连接，从而可以进行双向通信。websocekt借鉴了 socket 的思想，为 client 和 server 之间提供了类似的双向通信机制

应用场景

websocket可以做弹幕、消息订阅、多玩家游戏、协同编辑、股票基金实时报价、视频会议、在线教育、聊天室等应用实时监听服务端变化

websocket握手

• websocket握手请求报文：

get/chathttp/1.1 host:server.example.com upgrade:websocket connection:upgrade sec-websocket-key:x3jjhmbdl1ezlkh9gbhxdw== sec-websocket-protocol:chat,superchat sec-websocket-version:13 origin:http://example.com

下面是与传统 http 报文不同的地方：

upgrade:websocket connection:upgrade

表示发起的是 websocket 协议

sec-websocket-key:x3jjhmbdl1ezlkh9gbhxdw== sec-websocket-protocol:chat,superchat sec-websocket-version:13

sec-websocket-key 是由浏览器随机生成的，验证是否可以进行websocket通信，防止恶意或者无意的连接。

sec_websocket-protocol 是用户自定义的字符串，用来标识服务所需要的协议

sec-websocket-version 表示支持的 websocket 版本。

• 服务器响应：

http/1.1101switchingprotocols upgrade:websocket connection:upgrade sec-websocket-accept:hsmrc0smlyukagmm5oppg2hagwk= sec-websocket-protocol:chat

101 响应码 表示要转换协议。

connection: upgrade 表示升级新协议请求。

upgrade: websocket 表示升级为 websocket 协议。

sec-websocket-accept 是经过服务器确认，并且加密过后的 sec-websocket-key。用来证明客户端和服务器之间能进行通信了。

sec-websocket-protocol 表示最终使用的协议。

至此，客户端和服务器握手成功建立了websocket连接，http已经完成它所有工作了，接下来就是完全按照websocket协议进行通信了。

关于websocket

websocket心跳

可能会有一些未知情况导致socket断开，而客户端和服务端却不知道，需要客户端定时发送一个心跳 ping 让服务端知道自己在线，而服务端也要回复一个心跳 pong告诉客户端自己可用，否则视为断开

websocket状态

websocket 对象中的readystate属性有四种状态：

• 0: 表示正在连接

• 1: 表示连接成功，可以通信了

• 2: 表示连接正在关闭

• 3: 表示连接已经关闭，或者打开连接失败

websocket实践

服务端接收发送消息

websocket的服务端部分，本文会以node.js搭建

安装express和负责处理websocket协议的ws：

npminstallexpressws

安装成功后的package.json:

接着在根目录创建server.js文件:

//引入express和ws constexpress=require('express'); constsocketserver=require('ws').server; //指定开启的端口号 constport=3000; //创建express，绑定监听3000端口，且设定开启后在consol中提示 constserver=express().listen(port,()=>console.log(`listeningon${port}`)); //将express交给socketserver开启websocket的服务 constwss=newsocketserver({server}); //当websocket从外部连接时执行 wss.on('connection',(ws)=>{ //连接时执行此console提示 console.log('clientconnected'); //对message设置监听，接收从客户端发送的消息 ws.on('message',(data)=>{ //data为客户端发送的消息，将消息原封不动返回回去 ws.send(data); }); //当websocket的连接关闭时执行 ws.on('close',()=>{ console.log('closeconnected'); }); });

执行node server.js启动服务，端口打开后会执行监听时间打印提示，说明服务启动成功

在开启websocket后，服务端会在message中监听，接收参数data捕获客户端发送的消息，然后使用send发送消息

客户端接收发送消息

分别在根目录创建index.html和index.js文件

• index.html

• index.js

//使用websocket的地址向服务端开启连接 letws=newwebsocket('ws://localhost:3000'); //开启后的动作，指定在连接后执行的事件 ws.onopen=()=>{ console.log('openconnection'); }; //接收服务端发送的消息 ws.onmessage=(event)=>{ console.log(event); }; //指定在关闭后执行的事件 ws.onclose=()=>{ console.log('closeconnection'); };

上面的url就是本机node开启的服务地址，分别指定连接（onopen），关闭（onclose）和消息接收（onmessage）的执行事件，访问html，打印ws信息

打印了open connection说明连接成功，客户端会使用onmessage处理接收

其中event参数包含这次沟通的详细信息，从服务端回传的消息会在event的data属性中。

手动在控制台调用send发送消息，打印event回传信息:

服务端定时发送

上面是从客户端发送消息，服务端回传。我们也可以通过setinterval让服务端在固定时间发送消息给客户端:

server.js修改如下:

//当websocket从外部连接时执行 wss.on('connection',(ws)=>{ //连接时执行此console提示 console.log('clientconnected');  //固定发送最新消息给客户端  constsendnowtime=setinterval(()=>{  ws.send(string(newdate()));  },1000); -//对message设置监听，接收从客户端发送的消息 -ws.on('message',(data)=>{ -//data为客户端发送的消息，将消息原封不动返回回去 -ws.send(data); -}); //当websocket的连接关闭时执行 ws.on('close',()=>{ console.log('closeconnected'); }); });

客户端连接后就会定时接收，直至我们关闭websocket服务

多人聊天

如果多个客户端连接按照上面的方式只会返回各自发送的消息，先注释服务端定时发送，开启两个窗口模拟：

如果我们要让客户端间消息共享，也同时接收到服务端回传的消息呢？

我们可以使用clients找出当前所有连接中的客户端 ，并通过回传消息发送到每一个客户端 中：

修改server.js如下:

... //当websocket从外部连接时执行 wss.on('connection',(ws)=>{ //连接时执行此console提示 console.log('clientconnected'); -//固定发送最新消息给客户端 -constsendnowtime=setinterval(()=>{ -ws.send(string(newdate())); -},1000);  //对message设置监听，接收从客户端发送的消息  ws.on('message',(data)=>{  //取得所有连接中的客户端  letclients=wss.clients;  //循环，发送消息至每个客户端  clients.foreach((client)=>{  client.send(data);  });  }); //当websocket的连接关闭时执行 ws.on('close',()=>{ console.log('closeconnected'); }); });

关于“websocket有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。