本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > web2.0 >

收藏
分享到

HTML5 WebSocket技术使用介绍

web2.0 来源：互联网 作者：秩名 发布时间：2022-03-14 09:30:46 人浏览
摘要

WebSocket WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒

WebSocket

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。

现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客服端的浏览器，这种方式有一个很大的弊端，就是会占用很多的带宽。

最新的轮询效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求。

使用WebSocket，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。而且它为我们实现即时服务带来了两大好处：

节省资源：互相沟通的Header是很小的-大概只有 2 Bytes。
推送信息：不需要客户端请求，服务器可以主动传送数据给客户端。

socket.io

Socket.IO是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。

socket.io的特点

易用性：socket.io封装了服务端和客户端，使用起来非常简单方便。

跨平台：socket.io支持跨平台，这就意味着你有了更多的选择，可以在自己喜欢的平台下开发实时应用。

自适应：它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5。

WebSocket 安装部署

1

npm install socket.io

服务监听

socket.io的服务端启动非常的简单，引用socket.io模块。

1

var io = require('socket.io');

然后调用listen函数，传入监听的端口号，开始服务监听。启用了80端口用于测试：

1

var io = require('socket.io')(80);

注册事件

1

2

3

4

5

io.on('connection', function (socket) {

  socket.on('disconnect', function () {

 

  })

})

connection事件在客户端成功连接到服务端时触发，有了这个事件，我们可以随时掌握用户连接到服务端的信息。

当客户端成功建立连接时，在connection事件的回调函数中，我们还是可以为socket注册一些常用的事件,如：disconnect事件，它在客户端连接断开是触发，这时候我就知道用户已经离开了。

WebSocket 启动服务

目前为止，我们已经搭建好了一个最简单的socket服务器，为了在浏览器中能够访问到我们的服务，我们还需要在服务端搭建一个简单的web服务器，让浏览器能够访问我们的客户端页面。

为了便捷，我们选用node.js中常用的express框架来实现web服务，示例如下：

 

1

2

3

4

5

6

7

8

9

10

11

var express = require('express');

var app = express();

app.get('/', function (req, res) {

  res.status(200).send('成功连接！')

});

var server = require('http').createServer(app);

var io = require('socket.io')(server);

io.on('connection', function (socket) {

 

});

server.listen(80);

WebSocket 客户端引用

服务端构建完毕，下面看一看客户端应该如何使用。

服务端运行后会在根目录动态生成socket.io的客户端js文件，客户端可以通过固定路径/socket.io/socket.io.js添加引用。

首先添加网页index.html,并在网页中引用客户端js文件：

1

<script src="//cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>

WebSocket 连接服务

当客户端成功加载socket.io客户端文件后会获取到一个全局对象io，我们将通过io.connect函数来向服务端发起连接请求。

1

2

3

4

5

6

7

var socket = io.connect('/');

socket.on('connect',function(){

  //连接成功

});

socket.on('disconnect',function(data){

  //连接断开

});

connect函数可以接受一个url参数，url可以socket服务的http完整地址，也可以是相对路径，如果省略则表示默认连接当前路径。与服务端类似，客户端也需要注册相应的事件来捕获信息，不同的是客户端连接成功的事件是connect。

了解了客户端如何使用，下面我们创建网页index.html，并添加如下内容(保存):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

<head>

  <script src="//cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>

  <script>

    window.onload = function(){

      var socket = io.connect('/');

      socket.on('connect',function(){

        document.write('连接成功!');

      });

    };

  </script>

</head>

<body>

</body>

</html>

页面添加完毕还要记得在服务端app.js中为它添加路由，让我们可以访问测试网页：

1

2

3

app.get('/index',function(req,res){

  res.sendFile('index.html',{root:__dirname});

});

WebSocket 实时通讯

服务端和客户端都构建完毕了，下面开始发送消息。

当我们成功建立连接后，我们可以通过socket对象的send函数来互相发送消息，示例-客户端向服务端发送消息(index.html)：

1

2

3

4

5

6

7

8

var socket = io.connect('/');

socket.on('connect',function(){

  //客户端连接成功后发送消息'hello world!'

  socket.send('hello world!');

});

socket.on('message',function(data){

  alert(data);

});

连接成功后，我们向服务端发送消息hello world!，还为socket注册了message事件，它是send函数对应的接收消息的事件，当服务端向客户端send消息时，我们就可以在message事件中接收到发送过来的消息。

服务端向客户端发送消息也可以通过send的方式，示例 - 服务端向客户端发送消息(app.js)：

1

2

3

4

5

6

7

var io = require('scoket.io');

io.on('connection', function (socket) {

  socket.send('Hello World!');

  socket.on('message', function (data) {

    console.log(data);

  })

});

与客户端相同，服务端也需要为socket注册message事件来接收客户端发送过来的消息。

WebSocket 发送信息

socket.io既然是用来实现通讯的，那么如何发送、接收信息才是根本。

在socket.io中，emit函数用于发送数据，我们使用send的方式实现了信息的互发，其实send函数只是emit的封装，实际上还是使用了emit，且看send函数是如何实现的：

1

2

3

4

5

6

function send(){

 var args = toArray(arguments);

 args.unshift('message');

 this.emit.apply(this, args);

 return this;

}

在send函数中，获取到原来的参数，并在原来的基础上插入了一个参数message，然后调用了emit函数。通过send函数的实现，我们也学会了emit函数的用法，它有多个参数，第一个参数是事件名称，在接收端注册该事件就可以接收到发送过去的信息，事件名称可以自由定义，在不同的场景下，我们可以定义不同的事件来接收消息。第二个参数才是发送的数据。了解清楚了工作原理，下面来将send替换成emit函数发送信息：

1

2

3

4

5

6

//app.js

io.on('connection',function(socket){

   socket.emit('message','连接成功！');

   socket.on('message',function(data){

  });

});

WebSocket 服务端事件

事件监听是实现通讯的基础，因此充分了解socket.io的事件，学习如何在正确的时候使用它们至关重要。在一些关键的的状态下，socket.io可以注册相应的事件，通过事件监听，我们可以在这些事件中作出反应，常用的事件如下：

connection——客户端成功连接到服务器。

message——捕获客户端send信息。。

disconnect——客户端断开连接。

error——发生错误。

WebSocket 客户端

较服务端而言，客户端提供更多的监听事件，在实时应用中，我们可以为这些事件注册监听并作出反应，例如：connect提示用户连接成功，disconnect时提示用户停止服务等等。

connection——成功连接到服务器。

connecting——正在连接。

disconnect——断开连接。

connect_failed——连接失败。

error——连接错误。

message——监听服务端send的信息。

reconnect_failed——重新连接失败。

reconnect——重新连接成功。

reconnecting——正在重连。

那么客户端socket发起连接时的顺序是怎么样的呢？当第一次连接时，事件触发顺序为： connecting → connect；

当失去连接时，事件触发顺序为：disconnect → reconnecting → connecting → reconnect → connect。

WebSocket 命名空间

命名空间着实是一个非常实用好用的功能。我们可以通过命名空间，划分出不同的房间，在房间里的广播和通信都不会影响到房间以外的客户端。

那么如何创建房间呢？在服务端，通过of("")的方式来划分新的命名空间：

1

2

io.of('chat').on('connection',function(socket){

});

示例中，我们创建一个名为chat的房间，客户端可以通过如下方式连接到指定的房间：

1

var socket = io.connect('/chat');

虽然连接到指定的房间，但是我们也可以在服务端操作，自由的进出房间：

1

2

socket.join('chat');//进入chat房间

socket.leave('chat');//离开chat房间

WebSocket 广播消息

在实时应用中，广播是一个不可或缺的功能，socket.io提供两种服务端广播方式。

第一种广播方式可以称之为'全局广播'，顾名思义，全局广播就是所有连接到服务器的客户端都会受到广播的信息：

1

socket.broadcast.emit('DATA',data);

但是，在实际应用场景中，我们很多时候并不需要所有用户都收到广播信息，有的广播信息只发送给一部分客户端，比如某个房间里面的用户，那么可以使用如下方式：

1

socket.broadcast.to('chat').emit('DATA',data);

中间件

socket.io提供中间件功能，我们可以通过中间件来对请求进行预处理，比如身份验证：

1

2

3

4

io.use(function(socket, next){

 if (socket.request.headers.cookie) return next();

 next(new Error('Authentication error'));

});

示例中展示了通过中间件进行身份验证，当没有cookie的时候抛出异常。

传递参数

在很多应用场景中，客户端发起连接请求时都需要传递参数，这些参数可能是身份验证、初始化设置等等，那么socket.io发起连接时如何传递参数呢？

1

var socket = io.connect('/');

由于connect函数发起连接的参数是一个url，你可能会想到把参数拼接到url上，如http://xxxx?xx=xxxx，但是很遗憾这样是行不通的，我们可以通过这样的方式来传递参数：

1

var socket = io.connect('/',{ _query:'sid=123456' });

在服务端可以这样获取到传递的参数:

1

2

3

4

io.use(function(socket){

   var query = socket.request._query;

   var sid = query.sid;

});

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://segmentfault.com/a/1190000009694983
相关文章

  • no-bundle构建原理浅析

    no-bundle构建原理浅析
    为什么需要构建工具？ 处理其他类型文件使其能被浏览器正常加载 许多其他类型的文件需要编译处理为 ES6 模块才能被浏览器正常加载（
  • web2.0中流行的设计元素:颜色
    颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户

  • cypress测试本地web应用方法介绍

    cypress测试本地web应用方法介绍
    cypress测试本地web应用 在之前的cypress介绍里曾提到过，cypress虽然也可以测试部署好的应用，但是它最大的能力还是发挥在测试本地应用上。
  • HTML5 WebSocket技术使用介绍
    WebSocket WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 现很多网站为了实现即时通讯，所用的技术都是轮询

  • Web移动端Fixed布局的解决方案

    Web移动端Fixed布局的解决方案
    移动端业务开发，iOS 下经常会有fixed元素和输入框(input元素)同时存在的情况。 但是fixed元素在有软键盘唤起的情况下，会出现许多莫名其妙
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计