一、网络请求原理
一般情况下网络请求应用最多的是 HTTP请求，但是 HTTP 无连接的：有请求才会有响应，如果没有请求，服务器想主动推送信息给浏览器是不可能的。
图文篮球直播、聊天室原理，我们用HTTP实现的话，一般会用长轮询的方法：
setInterval(function(){
$.get();
},1000);
定时器外加 AJAX 请求来访问服务器数据是否发生改变。
WebSocket 是 HTML5中 的新协议。需要服务器和浏览器共同支持，实现全双工通信（bi-direction）。
简单来讲就是服务器由原来的被动被访问，变成现在主动下发新消息。
二、socket.io官例实现
socket.io 的官方网站有个实例，就是聊天室的案例。虽然是全英文的，但是我还是花了小半天自己动手实践跑了一下，第一次全英文的英文文档阅读下来还是很刺激的，收获不小，对英文的抵触又减少了一点。以后多读读可以提升英文水平。
先介绍这次 demo 用到的技术。socket.io 是借助 node.js 才能跑起来的。所以必须的安装node.js 掌握node技术，会使用 npm。外加前端的三驾马车。会以上知识就可以跑起来了。
npm :https://www.npmjs.com/package/socket.io
安装socket.io 和 express
npm install --save socket.io express官网案例代码
socket.io 官网：https://socket.io/
<!doctype html>
<html>
<head>
<title>socket 聊天室</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
复制js连接的代码
//引入express模块制作路由
var express = require('express');
var app = express();
//创建服务器使用的
var http = require('http').createServer(app);
//socket 负责全双工通信
var io = require('socket.io')(http);
//网站首页
app.get('/', function(req, res){
//绝对化路径
res.sendFile(__dirname + '/index.html');
});
//全双工通信建立
io.on('connection', function(socket){
console.log('一个用户连接了');
});
//网站的监听端口号
http.listen(500);
要想前后端收发数据还的在 index.html添加如下代码：
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
我们知道node没有自动静态路由器的功能，但<script src="/socket.io/socket.io.js"></script>此代码是自动静态化的 。
可以访问本地网站测试：http://127.0.0.1:500/socket.io/socket.io.js
想找到这个包还有一种方法：在node_modules 里面原文如下
直接 node index.js 访问网本地测试网站：http://127.0.0.1:500/
成功连接
为了接下来的演示还的在引入一个 JQuery包。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- 发送数据
后端index.js 增加socket.on 监听前端发送的数据
io.on('connection', function(socket){
console.log('一个用户连接了');
// 监听前端info 发送的数据
socket.on("info",function(data){
// 收到的内容发送回去
io.emit("fasong",data.content);
});
//用户断开连接的提示
socket.on('disconnect', function(){
console.log('一个用户离开了！');
});
});
前端 index.html 使用 emit 发送数据到服务端
<script>
var socket = io();
$("button").click(function(){
//发送到服务端
socket.emit("info",{
content:$("#m").val()
});
return false;// 不让刷新
});
// 接受服务器的广播
socket.on("fasong",data=>{
$("ul").append($("<li>"+data+"<li/>"));
})
</script>
结果：浏览器分屏访问
