基于 nodejs 的 webSockt （socket.io）

基于 nodejs 的 webSockt （socket.io） 理解

本文的业务基础是在基于 nodejs 的 socket.io 的直播间聊天室（IM）应用来的。

项目中具体的 框架以下 express + mongodb + socket.io

在介绍 socket.io  以前，咱们有必要对 webSocket 进行根本的原理的理解。
复制代码

1、webSocket 的前生今世

一、什么是 webSocket？
二、如何去用？
三、常用的场景？
四、须要注意的地方
好了，下面咱们就按照上面 提到的四点来进行分析。
复制代码

一、 什么是 websocket

官方文档解读： webSocket

这个是 MDN 的官方文档。详细的内容须要读者本身仔细去阅读了，笔者这里只介绍 容易出错的问题。

一、WebSockets 是一个能够建立和服务器间进行双向会话的高级技术。经过这个API你能够向服务器发送消息并接受基于事件驱动的响应，这样就不用向服务器轮询获取数据了。

固然这个只是说用来解决 不用向服务器轮询获取数据问题。 这么来讲的话其实仍是不太够 ‘官方’。

非官方理解： B/S 结构的软件项目中，客户端经过 http、https 等方式得到服务器消息，可是默认的 http 协议只支持 请求响应模式，这种模式简化了 web 服务器，减小服务器负担，加快网站的响应速度。 可是不能知足 咱们实时消息推送，聊天室等功能，这个时候 websocket 这个本 做为 unix 进程通讯机制 就被嫁接到了 应用程序间网络通讯，从而就有了现在的 socket
复制代码

二、Websocket: 通讯模型

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通信的网络技术。依靠这种技术能够实现客户端和服务器端的长链接，双向实时通讯。

特色： 事件驱动、异步 使用 ws 或者 wss 协议的 socket、 实现真正意义上的 推送功能

这里的  ws 和 wss 区别跟 http 和 https 的区别同样（安全性）

缺点就是 兼容性（今年已经 2017年了，应该能够不用考虑这个问题了）
复制代码

三、 websocket 客户端

官方文档中回提供系列的 api 具体以下：

分类以下：

a） 链接类：

	一、send() 向远程服务器发送数据
	二、close() 关闭该websocket连接

b) 监听函数类：

	一、onopen 当网络链接创建时触发该事件
	二、onerror 当网络发生错误时触发该事件
	三、onclose 当 websocket 被关闭时触发该事件
	四、onmessage 当 websocket 接收到服务器发来的消息的时触发的事件，也是通讯中最重要的一个监听事件。 其中 咱们能够定义各种 onmessage 事件的 type 从而 扩展咱们的 onmessage 事件。

c) websocket还定义了一个readyState属性:

	一、CONNECTING(0) websocket正尝试与服务器创建链接
	二、OPEN(1) websocket与服务器已经创建链接
	三、CLOSING(2) websocket正在关闭与服务器的链接
	四、CLOSED(3) websocket已经关闭了与服务器的链接
复制代码

四、 websocket 服务端

服务端就像是一个分发中心， 可是首先都得经过 connect 建立链接 从而造成 ws 的长链接。

只要 长链接 链接成功，那么接下来的事情就很好操做了， 好比在服务端 emit 触发一个事件，那么在 服务端就须要监听 on 方法来监听同一个事件，最后若是须要让 当前房间（注: 这里有个 单房间 和 多房间的概念，咱们在后面的介绍中会仔细的提到的）内的全部链接用户都被通知到这则消息，那么 在监听到服务端触发的消息的同时，再来触发一个广播给 客户端， 这个时候只要是在当前 ws 链接线上的全部用户都会被 emit 触发到这个事件，从而实现了 广播。

上面的这一长段话，可能暂时不太好理解，可是若是 亲手来写上这么一个 demo 就会理解不少了。
复制代码

2、 基于 nodeJs 的 webSocket 框架 socket.io

socket.io 是这篇文章的主角，由于它对 webSocket 作了一个很是完善的封装， 而且提出了 多房间  多命名空间的 概念，让多聊天室同时存在再也不是一个问题，因此，下面就会详细的来介绍下 socket.io 这个框架
复制代码

socket.io 这个是官网

咱们在官网中 能够看到很是简洁的 socket.io 的应用方法。

而且还展现了一个全世界通用的 IM （虽然这里经常能够看到 f**k xxx）
复制代码

好了，下面就针对 这个 socket.io 再进行一个详细的介绍

一、 Server api

二、 Client api

三、 Rooms and NameSpace
复制代码

这要就针对这三个来进行介绍

一、 Server api

服务端初始化 io 对象
复制代码

const io = require('socket.io')();
// or
const Server = require('socket.io');
const io = new Server();
复制代码

这个时候就须要看 你的后台 服务的语言， php java nodejs 等等

我是用的 nodejs 因此直接 使用 express or koa2 都可

而后建立 http-server 服务
复制代码

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

var app = express()

var server = http.createServer(app)

io = socket(server)

io.on('connection', function(socket) {
	// to do somethings
})

复制代码

上面的这个步骤就能够轻松的 经过 nodejs + express 建立了一个 socket 服务端的 服务了
复制代码

二、 Client api

上面的步骤中已经在 服务端进行了 一些列 的操做 ，这个时候就须要 在服务端 建立 链接


首先是 须要在 前端引用 这个 socket 文件
复制代码

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost');
</script>
const io = require('socket.io-client');
// or with import syntax
import io from 'socket.io-client';

复制代码

而后 建立 链接
复制代码

const socket = io();

复制代码

而后 触发监听  'connection'
复制代码

io.on('connection', (socket) => {
  let token = socket.handshake.query.token;
  // ...
})

复制代码

加入这个时候你在 服务端 打印 debug 若是顺利 就能够轻松 完成了第一个 socket 的连接啦~
复制代码

三、 Rooms and NameSpace

最后这里 介绍到的  rooms 和 namespace 的概念

在多房间 聊天室 中 占据了很大的做用

其中 介绍下 rooms  的 概念 ， 关于 namespace 相关能够到 socket.io 官网中进行查看
复制代码

// 广播给当前房间除了本身之外的全部人 

socket.broadcast.to(roomId).emit('msg', {	
	// take somethings
})

// 广播给当前房间中本身

socket.emit('msg', {
	// take somethings
})


// 广播给当前房间的全部人 

socket.to(roomId).emit('msg', {	
	// take somethings
})

复制代码

而后再结合上面的 监听 、 触发 方法，完成一系列的需求任务。
复制代码

恩，今天先到这里，有什么问题，能够留言互相学习。 欢迎推荐~~~

附上 github地址