当前位置: 首页 > 工具软件 > Ws.js > 使用案例 >

node.js中ws模块创建服务端和客户端

葛言
2023-12-01

一、WebSocket出现的原因

1、Http协议发布REST API 的不足:
每次请求响应完成之后,服务器与客户端之间的连接就断开了,如果客户端想要继续获取服务器的消息,必须再次向服务器发起请

求。这显然无法适应对实时通信有高要求的场景。

2、改善http的不足:Web通信领域出现了一些其他的解决方案,如轮询、长轮询、服务器推送事件、WebSocket
(1)轮询:就是重复发送新的请求到服务器。如果服务器没有新的数据,就发送适当的指示并关闭连接。然后客户端等待一段时间

(比如间隔一秒),再发送另一个请求。这种实现方式相对比较简单,无须做过多的更改。但缺点是轮询的间隔过长,会导致用户不能及

时接收到更新的数据;轮询时间过短,会导致查询请求过多,增加服务器端的负担。

(2)长轮询:客户端发送一个请求到服务器,如果服务器端没有新的数据,就保持这个连接直到有数据。一旦服务器端有了数据

(消息)给客户端,它就使用这个连接发送数据给客户端,接着连接关闭

(3)服务器推送事件:Server-Sent Events(SSE),SSE通常重用一个连接处理多个消息(事件)。SSE还定义了一个专门的媒体类

型,用于描述一个从服务端发送到客户端的简单格式。

(4)WebSocket:提供了一个真正的全双工连接。发起者是一个客户端,发送一个带特殊HTTP头的请求到服务端,通知服务器。

该方案的优点是属于html5标准,已经被大多数浏览器支持,而且是真正的全双工,性能比较好,其缺点是实现起来比较复杂,需要对ws

协议专门处理。

二、Node使用ws创建WebSocket服务器

1、Node.js原生API没有提供对WebSocket的支持,需要安装第三方包才能使用WebSocket功能

2、ws模块:是一个用于支持WebSocket客户端和服务器的框架。它易于使用,功能强大,且不依赖于其他环境

3、安装ws:npm install ws

4、创建WebSocket服务器:

 //创建一个WebSocket服务器,在8080端口启动
 const WebSocket = require('ws')
 const server = new WebSocket.Server({port:8080})

5、WebSocket.Server(options[,callback])方法中options对象所支持的参数

(1)host:绑定服务器的主机名

(2)port:绑定服务器的端口号

(3)backlog:挂起连接队列的最大长度

(4)server:预先创建的node.js http/s服务器

(5)verifyClient:可用于验证传入连接的函数

(6)handleProtocols:可用于处理WebSocket子协议的函数

(7)path:仅接受与此路径匹配的连接

(8)noServer:不启用服务器模式

(9)clientTracking:指定是否跟踪客户端

(10)perMessageDeflate:启用/禁用消息压缩

(11)maxPayload:允许的最大消息大小(以字节为单位)

三、监听连接:ws通过connection事件来监听连接

server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ​
     console.log('%s is connected ',clientName)
 })
 //只要有WebSocket连接到该服务器,就会触发'connection'事件;req对象可以用来获取客户端的信息,如ip、端口号
 //获取所有已连接的客户端信息,则可以使用server.clients数据集

四、发送数据:ws通过send()方法来发送数据

 /* send(data [,options][,callback])
       data:发送的数据
       options对象:
         (1)compress:指定数据是否需要压缩。默认为true
         (2)binary:指定数据是否通过二进制传送。默认是自动检测
         (3)mask:指定是否应遮罩数据。
         (4)fin:指定数据是否为消息的最后一个片段。默认为true
 */
 server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ​
     console.log('%s is connected ',clientName)
 ​
     ws.send('Welcome ' + clientName)
 })

五、接收数据:ws通过message事件来接收数据。当客户端有消息发送给服务器时,服务器就能够触发该消息

server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ​
     console.log('%s is connected ',clientName)
 ​
     ws.send('Welcome ' + clientName)
 ​
     ws.on('message',function incoming(message){
         console.log('received: %s from %s',message,clientName)
         server.clients.forEach(function each(client){
             if(client.readyState === WebSocket.OPEN){
                 client.send(clientName +" -> " + message)
             }
         })
     })
 })

六、准备的状态:ws中WebSocket类具有以下4中准备状态

1、CONNCETION:值为0,表示连接还没有打开

2、OPEN:值为1,表示连接已经打开,可以通信了

3、CLOSING:值为2,表示连接正在关闭

4、CLOSED:值为2,表示连接已经关闭

server.clients.forEach(function each(client){
             if(client.readyState === WebSocket.OPEN){
                 client.send(clientName +" -> " + message)
             }
 })

七、关闭WebSocket服务器:通过监听close事件关闭服务器

 server.on('close',function close(){
     console.log('disconnected')
 })

案例
1、服务器端:server.js

const WebSocket = require('ws')
 ​
 const server = new WebSocket.Server({port:8080})
 ​
 server.on('open',function open(){
     console.log('connected')
 })
 ​
 server.on('close',function close(){
     console.log('disconnected')
 })
 ​
 server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ​
     console.log('%s is connected ',clientName)
 ​
     ws.send('Welcome ' + clientName)
 ​
     ws.on('message',function incoming(message){
         console.log('received: %s from %s',message,clientName)
         server.clients.forEach(function each(client){
             if(client.readyState === WebSocket.OPEN){
                 client.send(clientName +" -> " + message)
             }
         })
     })
 })

2、客户端:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <script>
         var socket
         if (!window.WebSocket) {
             window.WebSocket = window.MozWebSocket
         }
         if(window.WebSocket){
             socket = new WebSocket("ws://localhost:8080/ws")
             socket.onmessage = function(event){
                 var ta = document.getElementById('responseTest')
                 ta.value = ta.value + '\n' + event.data
             }
             socket.onopen = function(event) {
                 var ta = document.getElementById('responseTest')
                 ta.value = '连接开启!'
             }
 ​
             socket.onclose = function(event) {
                 var ta = document.getElementById('responseTest')
                 ta.value = '连接关闭!'
             }
         }else{
             alert('你的浏览器不支持WebSocket')
         }
 ​
         function send(message){
             if(!window.WebSocket){
                 return
             }
             if(socket.readyState === WebSocket.OPEN){
                 socket.send(message)
             }else{
                 alert('连接没有开启')
             }
         }
     </script>
     <form onsubmit="return false">
         <h3>WebSocket 聊天室:</h3>
         <textarea  id="responseTest" style="width: 500px;height: 300px;"></textarea>
         <br>
         <input type="text" name="message" style="width: 300px;" value="Welcome to woniuxy.com">
         <input type="button" value="发送消息" onclick="send(this.form.message.value)">
         <input type="button" value="清空聊天记录" onclick="javascript:document.getElementById('responseTest').value=''">
     </form>
 </body>
 </html>
 类似资料: