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>