WebSocket与Socket.io的理解

jonh_felix 发布于2019-08-05 11:19 / 1383人阅读

摘要：也就是说浏览器必须主动请求，服务器才会发出响应。有了一个叫做的协议，允许服务器主动发出通知。它是一个用的包，简化了的程序开发。

WebSocket protocol是HTML5一种新的协议。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

HTTP设计的时候，比如浏览器直接发出请求，服务器才能响应。如果浏览器不发出request请求，服务器是不能主动找到浏览器，传输一些数据的。也就是说：浏览器必须主动请求，服务器才会发出响应。

但是现在的web页面，对实时的要求很高：web看股票、篮球比赛图文直播、聊天室、站内信等等。
现在的做法基本都是长轮询，用通俗易懂的话来说，就是客户端不停的（setInterval）向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的，只是我们人眼无法分辨是否停止，它只是一种快速的停下然后又立即开始连接而已。浏览器每隔比如20秒都问一下服务器，有没有人给我发站内信。服务器是不能有新消息就主动通知浏览器的。

HTML5有了一个叫做websocket的协议，允许服务器主动发出通知。
在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处：

列表项目

Header互相沟通的Header是很小的-大概只有 2 Bytes

Server Push

服务器的推送，服务器不再被动的接收到浏览器的request之后才返回数据，而是在有新数据时就主动推送给浏览器。
websocket需要浏览器足够新，IE10+。服务器也要足够新，NodeJS天生就支持。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

接下来谈谈socket.io。它是一个NodeJS用的npm包，简化了websocket的程序开发。不用socket.io也能开发websocket但是极其复杂，比如要设置HTTP头等等。下面是简单的demo。

app.js:

var express = require("express");
var app = express();
var http = require("http").Server(app);
//服务器端存在了一个io对象：
var io = require("socket.io")(http);
app.use(express.static("public"));
app.get("/", function(req, res){
  res.sendFile(__dirname + "/index.html");
});
//增加了一个中间件：
io.on("connect",function(socket){
  //服务器端出现了一个socket对象
  console.log("有人connect了！~~");
  socket.on("ltxx",function(info){
      console.log(info);
  });
});
http.listen(3000, function(){
  console.log("监听3000端口");
});

index.html:



  
    Socket.IO chat

浏览器emit了信息，服务器就能listen到。服务器listen使用on函数。

服务器要把自己收到的信息，再次broadcast出去，然后让所有的html页面都能够收听服务器的广播即可。

混合云服务器托管 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56286.html

nodejs + websocket (socket.io)

摘要：协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。双向通信，服务器可以向客户端主动发送数据。数据格式比较轻量，性能开销小，通信高效。为什么需要 WebSocket？因为个人对概念理解不是很深，文字表达能力不强，如果有关HTTP等方面描述不准确，欢迎纠正，谢谢大家初次接触 WebSocket 的人，都会问同样的问题：...

awkj 2019-08-23 17:50 评论0 收藏0
利用express+socket.io实现一个简易版聊天室

摘要：用伪代码来模拟下长轮询的过程前端利用下面函数进行请求后端代码做如下更改利用随机数的大小来模拟是否有新数据有新数据来了长轮询的确减少了请求的次数，但是它也有着很大的问题，那就是耗费服务器的资源。写在前面最近由于利用node重构某个项目，项目中有一个实时聊天的功能，于是就研究了一下聊天室，在线demo|源码，欢迎大家反馈。这个聊天室的主要利用到了socket.io和express。这个...

Chaz 2019-08-22 10:39 评论0 收藏0
八问WebSocket协议：为你快速解答WebSocket热门疑问

一、引言 WebSocket是一种比较新的协议，它是伴随着html5规范而生的，虽然还比较年轻，但大多主流浏览器都已经支持。它使用方面、应用广泛，已经渗透到前后端开发的各种场景中。对http一问一答中二式流程（就是从所周之的长轮询技要啦）的不满，催生了支持双向通信的WebSocket诞生。WebSocket是个不太干净协议。本文将从8个常见的疑问入手，为还不了解WebSocket协议的开发者快...

Zoom 2019-08-05 16:49 评论0 收藏0
WebSocket网络通信协议

摘要：而双工通讯协议，不仅客户端能向服务端发起请求，服务端也可以主动推送信息给客户端。目的即时通讯，替代轮询协议在年诞生，年成为国际标准。与协议有着良好的兼容性。是一个基于的，用于实时通信的一个软件包包括端和端，完全由实现。上一篇文章简要的介绍了一下http协议，这次再介绍一下WebSocket协议，两者之间有很大的区别，WebSocket协议是 HTML5 开始提供的一种在单个 TCP ...

xuhong 2019-08-02 12:04 评论0 收藏0
WebSocket网络通信协议

摘要：而双工通讯协议，不仅客户端能向服务端发起请求，服务端也可以主动推送信息给客户端。目的即时通讯，替代轮询协议在年诞生，年成为国际标准。与协议有着良好的兼容性。是一个基于的，用于实时通信的一个软件包包括端和端，完全由实现。上一篇文章简要的介绍了一下http协议，这次再介绍一下WebSocket协议，两者之间有很大的区别，WebSocket协议是 HTML5 开始提供的一种在单个 TCP ...

stefan 2019-08-29 17:19 评论0 收藏0