关于websocket

http 协议:
　　　　http 协议:超文本传输协议
　　　　http协议作用:传输网页资源(html/css/js/mp3/mp4/..)
　　　　http 工作方式:请求和响应
　　　　　　必须是客户端先发起请求，服务器端才会有响应，而且一次请求一次响应

问题:

　　有一次应用场景下不适合使用http协议，比如：金融行业:[股神：走势]，这时候就需要webScoket了。

webSocket 协议

webSoket是H5的一个新特性，它实现了浏览器端与服务器端的双向通信，并且它支持跨域访问
　　　　webSocket作用:网络之间传输数据
　　　　webSocket工作方式:广播和收听
　　　　浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
　　　　webSocket适用场景:股票走势图/聊天室
webSocket在客户端实现
　　　　创建webSocket对象
　　　　var ws = new WebSocket("ws://127.0.0.1:9001");
　　　　ws:协议名称
　　　　9001:webSocket服务器默认端口

　　　　-接收webSocket服务器数据
　　　　ws.onmessage = function(e){e.data}

　　　　-向服务器发送数据
　　　　ws.send(stringMsg);
　　　　-关闭连接
　　　　ws.close();

webSocket的使用，需要配合服务端。

例子：

搭建一个node服务器，配置好websocket

 1 //02_ws_server.js
 2 //node.js ws 服务器
 3 //1:下载ws模块 npm i ws
 4 //2:引入ws模块
 5 const ws = require("ws");
 6 //3:创建ws服务器并且指定端口 8888
 7 var server = new ws.Server({port:8888});
 8 console.log("ws 服务器开始监听端口");
 9 
10 
11 //4:绑定事件 connection 客户端连接事件 （只要有客户端连接过来，就会触发这个事件）
12 server.on("connection",(socket)=>{
13   console.log("ws 服务器接收连接");
14   //5:服务器不停向客户端发送数据 定时器
15   var counter = 1;
16   var timer = setInterval(function(){
17     counter++;
18     socket.send("I am Server - "+counter);//将数据发送给客户端，每一秒发一次
19   },1000);
20   //6:服务器接收客户端数据
21   socket.on("message",(msg)=>{
22     console.log("服务器接收到消息"+msg);
23   });
24   //7:如果客户端发来断开连接请求停止定时器
25   socket.on("close",()=>{
26     console.log("客户端断开连接...");
27     clearInterval(timer);
28   })
29 });

前端代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4       <meta charset="UTF-8">
 5       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6       <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7       <title>Document</title>
 8 </head>
 9 <body>
10       <button id="btn1" onclick="handle1()">接收服务器数据</button><br>
11       <button id="btn1" onclick="handle2()">向服务器发送信息</button><br>
12       <button id="btn1" onclick="handle3()">关闭连接</button><br>
13       <script>
14             //创建变量保存webSocket对象
15             var   c = new WebSocket('ws://localhost:8888')//创建连接
16             // 创建连接，接收服务器返回来的数据
17             function handle1(){
18                   c.onmessage=function(e){//接收数据
19                         console.log(e.data)//e.data，服务器返回的数据
20                   }
21             }
22 
23 
24 
25             // 创建连接，向服务器发送数据
26             function handle2(){
27                   c.send('我是前端小白')//向服务器端发送的数据
28 
29             }
30 
31             
32             //断开连接
33             function handle3(){
34                   c.close()
35             }
36       </script>
37 </body>
38 </html>