WebSocket和SocketIO总结

最新推荐文章于 2024-07-31 23:49:03 发布
最新推荐文章于 2024-07-31 23:49:03 发布
阅读量3.3w 收藏 72
点赞数 13
分类专栏： websocket 文章标签： websocket im

WebSocket和SocketIO总结

转载：https://blog.csdn.net/qq_14998435/article/details/80030258

1、WebSocket是什么？

WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术。它是HTML最新标准HTML5的一个协议规范，本质上是个基于TCP的协议，它通过HTTP/HTTPS协议发送一条特殊的请求进行握手后创建了一个TCP连接，此后浏览器/客户端和服务器之间便可以通过此连接来进行双向实时通信。

2、为什么要用WebSocket？

1）一直以来，HTTP协议是无状态、单向通信的，即客户端请求一次，服务器回复一次。如果想让服务器消息及时下发到客户端，需要采用类似于轮询的机制，即客户端定时频繁的向服务器发出请求，这样效率很低，而且HTTP数据包头本身的字节量较大，浪费了大量带宽和服务器资源；

2）为提高效率，出现了AJAX/Comet技术，它实现了双向通信且节省了一定带宽，但仍然需要发出请求，本质上仍然是轮询；

3）新一代HTML标准HTML5推出了WebSocket技术，它使客户端和服务器之间能通过HTTP协议建立TCP连接，之后便可以随时随地进行双向通信，且交换的数据包头信息量很小；

3、如何使用WebSocket？

在支持WebSocket的浏览器中，创建Socket之后，通过onopen、onmessage、onclose、onerror四个事件的实现来处理Socket的响应；

4、WebSocket与HTTP、TCP的关系

WebSocket和HTTP都属于应用层协议，且都是基于TCP的，它们的send函数最终也是通过TCP系统接口来做数据传输。那么WebSocket和HTTP的关系呢？WebSocket在建立握手连接时，数据是通过HTTP协议传输的，但是在连接建立后，真正的数据传输阶段则不需要HTTP协议的参与。它们之间的关系如下图：

5、什么情况下使用WebSocket？

如果游戏需要同时支持手机端、Web端，那毫无疑问应该使用WebSocket，现在各个平台都提供了相应的WebSocket实现。如果游戏不需要支持Web端，且对实时性要求比较高，如多人射击、MMORPG之类，那么使用TCP/UDP结合的原生Socket会比较好。

6、SocketIO

WebSocket是HTML5最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket是SocketIO的一个子集。

 

 

本教程将创建一个基本的聊天应用。 它几乎不要求你事先了解 Node.JS 或 Socket.IO ，适合所有知识层次的用户。

简介

使用流行的 web 应用技术栈 —— 比如 LAMP (PHP) —— 来编写聊天应用通常是很困难的。它包含了轮询服务器以检测变化，还要追踪时间戳，并且这种实现是比较慢的。

大多数实时聊天系统通常基于 socket 来构建。 Socket 为客户端和服务器提供了双向通信机制。

这意味着服务器可以 推送 消息给客户端。无论何时你发布一条消息，服务器都可以接收到消息并推送给其他连接到服务器的客户端。

web 框架

首先要制作一个 HTML 页面来提供表单和消息列表。我们使用了基于 Node.JS 的 web 框架 express 。 请确保安装了 Node.JS。

首先创建一个 package.json 来描述我们的项目。 推荐新建一个空目录 （这里使用 chat-example）。


{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

要保存 dependencies 信息， 可以用 npm install --save：

npm install --save express@4.15.2

express 已经安装好了。我们现在新建一个 index.js 文件来创建应用。


var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

这段代码作用如下：

  1. Express 初始化 app 作为 HTTP 服务器的回调函数 （见第 2 行）。
  2. 定义了一个路由 / 来处理首页访问。
  3. 使 http 服务器监听端口 3000。

运行 node index.js 就可以看到如下画面：

socket.io 快速入门教程——聊天应用

在浏览器中访问 http://localhost:3000：

socket.io 快速入门教程——聊天应用2

HTML 服务器

目前在 index.js 中我们是通过 res.send 返回一个 HTML 字符串。 如果我们将整个应用的 HTML 代码都放到应用代码里，代码结构将变得很混乱。 替代的方法是新建一个 index.html 文件作为服务器响应。

现在我们用 sendFile 来重构之前的回调：


app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});

index.html 内容如下：


<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</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>

现在重启进程 （按 Control+C ，然后再次运行 node index） ，刷新页面显示如下：

socket.io 快速入门教程——聊天应用3

集成 Socket.IO

Socket.IO 由两部分组成：

  • 一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器： socket.io
  • 一个加载到浏览器中的客户端： socket.io-client

开发环境下， socket.io 会自动提供客户端。正如我们所见，到目前为止，我们只需要安装一个模块：

npm install --save socket.io

这会安装模块并添加依赖到 package.json。在 index.js 文件中添加该模块：


var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

我们通过传入 http （HTTP 服务器） 对象初始化了 socket.io 的一个实例。 然后监听 connection 事件来接收 sockets， 并将连接信息打印到控制台。

在 index.html 的 </body> 标签中添加如下内容：


<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

这样就加载了 socket.io-client。 socket.io-client 暴露了一个 io 全局变量，然后连接服务器。

请注意我们在调用 io() 时没有指定任何 URL，因为它默认将尝试连接到提供当前页面的主机。

重新加载服务器和网站，你将看到控制台打印出 “a user connected”。
尝试打开多个标签页，可以看到多条信息：

socket.io 快速入门教程——聊天应用4

每个 socket 还会触发一个特殊的 disconnect 事件：


io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

你可以多次刷新标签页来查看效果：

socket.io 快速入门教程——聊天应用5

触发事件

Socket.IO 的核心理念就是允许发送、接收任意事件和任意数据。任意能被编码为 JSON 的对象都可以用于传输。二进制数据 也是支持的。

这里的实现方案是，当用户输入消息时，服务器接收一个 chat message 事件。index.html 文件中的 script 部分现在应该内容如下：


<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

在 index.js 中打印出 chat message 事件：


io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

结果应该如以下视频所示：

 

广播

接下来的目标就是让服务器将消息发送给其他用户。

要将事件发送给每个用户，Socket.IO 提供了 io.emit 方法：

io.emit('some event', { for: 'everyone' });

要将消息发给除特定 socket 外的其他用户，可以用 broadcast 标志：


io.on('connection', function(socket){
  socket.broadcast.emit('hi');
});

为了简单起见，我们将消息发送给所有用户，包括发送者。


io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

在客户端中，我们捕获 chat message 事件，并将消息添加到页面中。现在客户端代码应该如下：


<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

就这样，聊天应用就完成了，大约只有 20 行代码！ 最终效果如下：

 

课外练习

下面是一些可以做的优化：

  • 当用户连接和断开连接时广播消息
  • 添加昵称
  • 不要将消息发送给服务器后再返回给发送者，应该在用户按下回车后立即将消息显示到消息列表。
  • 添加 “{用户} 正在输入” 功能
  • 显示在线用户
  • 添加私密消息
  • 分享你的改进！

获取示例

可以从 GitHub 获取。

$ git clone https://github.com/socketio/chat-example.git


 

feng98ren
关注
专栏目录
websocket和socket.io
weixin_42679876的博客
08-02 3346
websocket和socket.io
WebSocket与Socket.io
老电影故事的博客
08-09 1586
WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议。
Socket.io 是什么，如何使用，与 WebSocket 的关系？
最新发布
weixin_56241259的博客
07-31 607
本篇文章带你走进socket.io的世界，理解与 WebSocket 的不同，以及如何使用？
WebSocket介绍和Socket的区别
热门推荐
东境物语
01-17 11万+
   WebSocket介绍与原理 WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 ——百度百科 目的：即时通讯，替代轮询 网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。 HTTP协议是非持久化的，单向的网...
socket.io，理解socket.io
weixin_30780649的博客
09-05 326
原文：http://www.cnblogs.com/xiezhengcai/p/3957314.html 要理解socket.io ，不得不谈谈websocket 在html5之前，因为http协议是无状态的，要实现浏览器与服务器的实时通讯，如果不使用 flash、applet 等浏览器插件的话，就需要定期轮询服务器来获取信息。这造成了一定的延迟和大量的网络通讯。随着HTML5 的出现，这一情...
Android 即时通信WebSocket和SocketIO的总结
Crystal_xing的专栏
02-25 4689
       WebSocket部分：        首先应该先明确WebSocket是一个应用层协议，该协议是一种基于TCP连接上进行全双工通讯的协议（全双工通信允许发送数据和接收数据同时发生），因为有了WebSocket协议，使得客户端和服务器之间的数据实时交换变得更加简单，app客户端和服务器只需要完成一次握手（shake hand），两者之间就可以创建持久性的长连接，并进行双向数据传输。...
websockets 和 socketio 的比较
Alex的博客
10-24 1935
websockets 和 socketio 的比较
socketIO-Server-NodeJS：NodeJs服务器通过websocket和jwt令牌使用家庭自动化
02-15
WebSocket是一种在客户端和服务器之间建立持久连接的协议，允许数据双向传输。与传统的HTTP不同，WebSocket协议在建立连接后保持开放，减少了频繁的HTTP请求/响应开销，提高了实时性。 2. **Node.js与Socket.IO** ...
webSocket的基本使用与socket.io库使用
jh035的博客
11-29 178
并将此消息在服务端进行发布（这样就可以多个客户端都收到其中一个客户端发的消息，从而实现了实时,服务端在其中做到类似广播的效应），然后各个客户端可以监听到t事件并将其渲染在列表或者其他使用。作为一个学习node不久的小白，其中有一个疑问是我花时间才搞清楚的，希望可以帮助到跟我有同样疑虑的学习者。进行发送消息，消息会就会同步到多个客户端，从而实现聊天室等功能。该例子总体流程是：用户在客户端点击提交，然后发布。会自动调回到长轮询，相对比较智能,也更方便。事件并携带参数过去，服务端监听。这里为什么可以这样去写呢？
websocket、socketio
haohaohaowa的博客
02-23 807
websocket、socketio
WebSocket 和socket、HTTP的区别和联系
SL_ideas的博客
06-23 2万+
上一篇介绍了WebSocket的原理和使用，这一篇介绍一下它和socket、http的区别及联系。一、WebSocket 是什么？ WebSocket是HTML5中的协议。HTML5 Web Sockets规范定义了Web Sockets API，支持页面使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道，通过一个单一的套接字在We
WebSocket 和 Socket.IO
生命不息，挖坑不止
06-29 1752
当服务器接收到 'chat message' 事件时，它会将这个消息广播给所有的客户端。2. 如果服务器支持 WebSocket 协议，它会返回一个包含 "101 Switching Protocols" 状态码的 HTTP 响应，表示服务器同意升级到 WebSocket 协议。在这个示例中，当用户提交表单时，浏览器会发送一个 'chat message' 事件到服务器，并清空输入框。在客户端，你可以使用 Socket.IO 的客户端库来连接到服务器，并发送和接收事件。你可以创建一个实时聊天应用。
websocket与socket.io比较与分析
xiaojax的博客
04-07 7080
大家参与的项目里多少都会有web server与browser需要长连接互联的场景，当然我也是，之前没有进行太多方案的调研（比如深入理解通信协议和通用的一些解决方案），所以websocket就不假思索地直接用了，包括去年写的框架xframe里也是直接嵌入了官方websocket的library来实现的。 两周前遇到个场景，前端大佬提需求说能否支持socket.io，之前写的websocket的se...
即时通信WebSocket 和Socket.IO
agrj56057的博客
08-13 747
WebSocket HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 在2008年诞生，2011年成为国际标准。 现在基本所有浏览器都已经支持了。 WebSocket是一种在单个TCP连接上进行全双工通信的协议。在WebSocket API中，浏览器和服务器只需要完成一次握手（不是指建立TCP连接的那个三次握手，是指在建立TCP连接...
websocket.io
chengxiaocong1131的博客
06-12 365
一. 服务器端 使用express服务 const path = require('path'); const app =express();//其实是一个监听函数 const server = require('http').createServer(app); //使用静态文件中间件,把当...
WebSocket（二）-WebSocket、Socket、TCP、HTTP区别
包磊磊的博客
10-12 732
1. 概述 WebSocket 是为了满足基于 Web 的日益增长的实时通信需求而产生的。在传统的 Web 中，要实现实时通信，通用的方式是采用 HTTP 协议不断发送请求。但这种方式即浪费带宽（HTTP HEAD 是比较大的），又消耗服务器 CPU 占用（没有信息也要接受请求）。（下图来自WebSocket.org） 而是用 WebSocket 技术，则会大幅降低上面提到的消耗：（下图...
WebSocket 和 Socket
weixin_41293999的博客
06-22 1868
WebSocket WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 目的：即时通讯，替代轮询 应用场景：网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。 HTTP协议是非持久化、单向的网络协议。在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。 http作为即时通讯的缺点： 过多不必要的请求 需要不
websocket和Socket
Andrew_Walker的博客
02-07 286
Websocket http请求 无状态 单双工,请求结束 tcp断开连接 于是对于聊天软件等即时消息, 从最开始的轮询(polling)改善,为长轮询, http的header较大,而且客户端使用到的,不太多. 于是产生websocket协议 ws wss为ws ssl? Socket不是协议,而是对tcp和udp的抽象层调用接口 Socket通常也称作”套接字”，用于描述IP地址和端口，是一个通信链的句柄。网络上的两个程序通过一个双向的通讯连接实现数据的交换，这个双向链路的一端称为一个.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值