了解一下websocket

Posted 2021-04-25 web小记

Web 应用的交互过程通常是客户端通过浏览器发出一个请求，服务器端接收请求后进行处理并返回结果给客户端，客户端浏览器将信息呈现




这种机制对于信息变化不是特别频繁的应用尚可，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在当前业界移动互联网蓬勃发展的趋势下，高并发与用户实时响应是 Web 应用经常面临的问题，比如金融证券的实时信息，Web 导航应用中的地理位置获取，社交网络的实时消息推送等。




WebSocket 是 html5 一种新的协议，WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

在建立连接后，WebSocket服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据，就像 Socket 一样；

WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。

此处为WebSocket通讯的连接交互：

socket.io是基于websocket进行了完美封装的插件包。

下面，来看一下socket.io的使用。

Ⅰ.服务器端使用

npm install socket.io --save

node 监听 3000 端口, io 对 connection 进行监听

a.监听服务器所有客户端,建立连接并返回所有连接对象

io.sockets.on('connection',function(sockect){ console.log('one user is login')})

b. io connect 后, socket 进行监听事件 传递参数

sockect.on(event,function(name){ socket.emit("user" + name + "is login")    // 通过emit 向本连接传递})

socket 三种事件监听io.sockets.emit() --> 向所有客户端发送广播socket.broadcast.emit() --> 向除去本连接以外的所有客户端发送广播socket.emit() --> 向建立本连接的客户端发送广播

socket 通过 emit \ on 进行数据双向通信

在客户端、服务器端均可使用 socket.io的核心函数emit() 发送

参数：事件名, 数据,

回调函数on() 监听 emit 发送的事件

参数：事件名，匿名函数socket 三种默认事件

connect \ message \ disconnect 三种事件满足条件 则 自动触发

 三种事件满足条件 则 自动触发

Ⅱ. 客户端使用客户端通过引入 即可使用

 $(document).ready(function() { var socket = io.connect();});

使用this.socket.on() ---> 进行事件监听 , 对服务器端发送的事件一一监听

包括：connect \ nickExisted \ loginSuccess \ system \ newMsg \ newImg

使用 this.socket.on() ---> 进行错误事件监听