node.js中ws模块创建服务端与客户端实例代码
一、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>
总结
到此这篇关于node.js中ws模块创建服务端与客户端的文章就介绍到这了,更多相关node.js创建服务端与客户端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了nodejs实现连接mongodb数据库的方法,结合实例形式分析了nodejs针对mongodb数据库的简单连接、查询及关闭等操作技巧,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了Node使用Selenium进行前端自动化操作的代码实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
本文通过几个具体实例来分析讲解了node.js中require的使用方法，非常的详尽，这里推荐给大家2014-12-12
这篇文章主要给大家介绍了关于NodeJs环境中NODE_ENV介绍和设置的相关资料,NODE_ENV其实就是环境变量之一,用于设置nodejs当前的运行环境,需要的朋友可以参考下2024-07-07
本篇文章给大家详细讲解了nodejs+express搭建一个简易的多人聊天室的详细步骤，有兴趣的朋友学习下。2018-02-02
Node.js多文件Stream合并,串行和并发两种模式的实现方式
这篇文章主要介绍了Node.js多文件Stream合并,串行和并发两种模式的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了详解Windows下安装Nodejs步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
Node.js 凭借其非阻塞、事件驱动的架构,已成为构建各种应用程序的流行选择,使用 Node.js 进行开发时,选择正确的架构模式来满足项目需求至关重要,在本文中,我们将探讨几种 Node.js 架构模式并提供示例来说明它们的用法,需要的朋友可以参考下2023-09-09
Node.js 获取微信JS-SDK CONFIG的方法示例
这篇文章主要介绍了Node.js 获取微信JS-SDK CONFIG的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
如果你在处理应用中 I/O 相关的操作，你可以利用 Node.js 中的流(stream)，这篇文章主要为大家详细介绍了Node.js Streams文件读写操作，感兴趣的小伙伴们可以参考一下2016-07-07
最新评论