胡言乱语websocket

时间 2019-12-07

标签胡言乱语 websocket 繁體版

原文原文链接

小胡：公子，你今天为啥写websocket？html

魏三：由于你家公子我健忘啊，不写写一下子我忘了怎么办？node

小胡：公子你昨天的es6坑还没填？es6

魏三：我昨天写了啥？？？web

Websocket是什么？

Websocket是一种网络通讯协议，为何要新建协议，HTTP协议不能用吗？HTTP协议有个缺点就是通讯只能由客户端发起。HTTP协议作不到主动推送数据给客户端。express

前几天我去社康看病，能够扫码看排队状况，看前面排了几我的。扫完码以后我就看到页面不停的在刷新，也就是说页面不停的在请求后台。为何会这样呢？bash

想要获取最新的状况，在HTTP协议里面须要不停的经过客户端问服务器，有最新没有？因此就要不停的发送请求过去。轮询的越频繁在用户多的状况下发送的请求就越多，服务器的压力也就越大。因此若是不用WebSocket的话，咱们就只能刷新页面看最新的状况。服务器

为何WebSocket链接能够实现双向通讯而HTTP链接不行呢？实际上HTTP协议是创建在TCP协议之上的，TCP协议自己就实现双向统统信，可是HTTP协议的请求－应答机制限制了双向统统信。WebSocket链接创建之后，其实只是简单规定了一下：接下来，我们通讯就不使用HTTP协议了，直接互相发数据吧。websocket

若是这些你都记不住的话，简单一句人话就是HTTP是单行道，WebSocket是双行道。若是你还不清楚，能够看下我借用大神阮一峰的图网络

WebSocket能干什么？

WebSocket一旦创建了通讯，双行道创建好后，就能够实时通讯了。好比股市的实时滚动啦，天气实时更新啦。app

WebSocket是怎么干的？

WebSocket并非全新的协议，而是利用了HTTP协议来创建链接。咱们来看看WebSocket链接是如何建立的。

先写一个node里面的简单示范

//index.js文件中引入两个模块
const http=require('http');
//封装了WebSocket的模块
const io=require('socket.io');

//起一个http的服务
let httpServer=http.createServer();
httpServer.listen(3000);

//websocket也监听一样的端口
let wsServer=io.listen(httpServer);
wsServer.on('connection',function(sock){
  //通讯链接成功后，定时发送数据到客户端。
   setInterval(function(){
   	  sock.emit("ttt",Math.random())
   },500)
   
})

//第二种方法

// index.js文件
const express = require('express');
const app = express();
// 设置静态文件夹
app.use(express.static(__dirname));
// 经过node的http模块来建立一个server服务
const server = require('http').createServer(app);
// WebSocket是依赖HTTP协议进行握手的
const io = require('socket.io')(server);
// 监听客户端与服务端的链接
io.on('connection', function(socket) {
  setInterval(function() {
        socket.emit("ttt", Math.random())
    }, 500)
});
// 监听3000端口
server.listen(3000);

//使用node index.js起了这个服务后会发送数据到3000端口

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	//引入模块
	<script src="http://localhost:3000/socket.io/socket.io.js"></script>
</head>
<body>
	<script>
	    //链接websocket的端口。
		let sock=io.connect("ws://localhost:3000/");
        //接收数据
         sock.on('ttt',function(args){
         	console.log(`服务器发送了：${args}`);
         })
	</script>
</body>
</html>

复制代码

第一种和第二种方法的区别就是，第二种引入了express框架，你能够用http://localhost:3000/index.html访问index.html。按照上面的办法你就能够收到服务器端发送到客户端的数据了，因此WebSocket你入门了吗？