WebSocket之socket.io

06. 八月 2016 HTML5, Nodejs 0

还依稀记得在15年寒假的时候,在上学的时候做一个校园app的项目,要实现在线聊天功能,知道WebSocket这个东西,但是当时太年轻,没有做出来!时隔这么长时间,现在捡起来看看这个东西。

WebSocket为何物?

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。
使用WebSocket,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道,两者之间就直接可以数据互相传送

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

比起之前的长轮询和轮询要好很多!

简单的实现

1 WebSocket服务器

2 Node客户端

3 网页客户端

但是WebSocket是H5提供的,所以兼容性问题就肯定会有了,所以就出现了Socket.IO。

何为Socket.IO?

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

socket.io的特点

  • 易用性:socket.io封装了服务端和客户端,使用起来非常简单方便。
  • 跨平台:socket.io支持跨平台,这就意味着你有了更多的选择,可以在自己喜欢的平台下开发实时应用。
  • 自适应:它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5。

1初步使用

1.1安装部署

使用npm安装socket.io

npm install socket.io

1.2 启动服务

创建 app.js 文件

1.3 客户端引用

服务端运行后会在根目录动态生成socket.io的客户端js文件 客户端可以通过固定路径/socket.io/socket.io.js添加引用
客户端加载socket.io文件后会得到一个全局的对象io
connect函数可以接受一个url参数,url可以socket服务的http完整地址,也可以是相对路径,如果省略则表示默认连接当前路径 创建index.html文件

1.4 发送消息

成功建立连接后,我们可以通过socket对象的send函数来互相发送消息 修改index.html

修改app.js

深入分析

send方法

send函数只是emit的封装

emit函数有两个参数

  • 第一个参数是自定义的事件名称,发送方发送什么类型的事件名称,接收方就可以通过对应的事件名称来监听接收
  • 第二个参数是要发送的数据

服务端事件

事件名称 含义
connection 客户端成功连接到服务器
message 接收到客户端发送的消息
disconnect 客户端断开连接
error 监听错误

客户端事件

事件名称 含义
connect 成功连接到服务器
message 接收到服务器发送的消息
disconnect 客户端断开连接
error 监听错误

划分房间

1 命名空间

可以在服务器端进入不同的房间,在房间里的广播和通信都不会影响到房间以外的客户端

2 广播

全局广播就是所有连接到服务器的客户端都会受到广播的信息

也可以只在某个房间内发送广播

最后附上一个小DEMO

聊天室

app.js

index.html

 

 


发表评论

电子邮件地址不会被公开。