【Node.js】WebSockets

概述

WebSockets是一种在浏览器和服务器之间建立持久连接的协议,它允许服务器主动推送数据给客户端,并且在客户端和服务器之间实现双向通信。

  1. 建立连接:客户端通过在JavaScript代码中使用WebSocket对象来建立WebSockets连接。例如:var socket = new WebSocket('ws://example.com/socket');

  2. 协议:WebSockets使用标准的WebSocket协议来进行通信。相对于HTTP协议,WebSocket协议提供了更高效率和更低的延迟。ws和wss协议正对应了http和https。

  3. 服务器支持:为了使用WebSockets,服务器必须支持WebSocket协议。

  4. 事件:WebSocket对象提供了一些事件,用于处理连接的不同阶段和接收到的数据。常见的事件有onopen(连接建立)、onmessage(接收到消息)、onclose(连接关闭)等。

  5. 数据传输:WebSockets可以传输文本和二进制数据。文本数据是以UTF-8编码发送和接收的,而二进制数据使用ArrayBuffer对象。

  6. 安全性:与HTTP协议通过TLS/SSL协议进行加密一样,WebSockets也可以通过wss协议来提供安全的通信。wss://表示通过TLS/SSL加密的WebSockets连接。

  7. 跨域策略:WebSockets默认不受同源策略的限制,可以跨域使用,但仍然会受到服务器的安全策略限制。

可以在浏览器和服务器之间建立稳定的连接,实际应用如聊天应用、实时数据监控等。

基本使用

使用WebSockets进行连接和通信:

首先,在客户端使用WebSocket对象来建立连接:

javascript 复制代码
var socket = new WebSocket('ws://example.com/socket');

// 监听连接建立事件
socket.onopen = function() {
  console.log('WebSocket连接已建立');
  
  // 向服务器发送消息
  socket.send('Hello Server!');
};

// 监听接收到消息事件
socket.onmessage = function(event) {
  var message = event.data;
  console.log('接收到服务器消息:' + message);
};

// 监听连接关闭事件
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

在上面的代码中,我们创建了一个WebSocket对象并指定连接的URL。然后我们监听了三个事件:onopen表示连接建立时触发的事件,onmessage表示接收到消息时触发的事件,onclose表示连接关闭时触发的事件。

在连接建立后,我们向服务器发送了一条消息Hello Server!。当服务器向客户端发送消息时,onmessage事件将被触发,并且我们可以在回调函数中处理接收到的消息。

接下来,让我们看一下服务器端的示例代码(以Node.js和Express框架为例):

javascript 复制代码
const express = require('express');
const WebSocket = require('ws');

const app = express();

// 创建WebSocket服务器
const server = require('http').createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', function(socket) {
  console.log('WebSocket连接已建立');

  // 监听客户端发送的消息
  socket.on('message', function(message) {
    console.log('接收到客户端消息:' + message);

    // 向客户端发送消息
    socket.send('Hello Client!');
  });

  // 监听连接关闭事件
  socket.on('close', function() {
    console.log('WebSocket连接已关闭');
  });
});

server.listen(3000, function() {
  console.log('服务器已启动,监听端口3000');
});

在服务器端的代码中,我们使用了ws库创建了一个WebSocket服务器,并监听了connection事件。当有客户端连接到服务器时,connection事件将被触发,并在该回调函数中处理连接过程。

在服务器接收到客户端的消息时,我们输出消息到控制台,并向客户端发送一条回复消息。当连接关闭时,close事件将被触发。

最后,我们在Express应用中创建了一个HTTP服务器,将WebSocket服务器绑定到服务器上,然后启动服务器监听端口3000。

通信小实例:

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    const ws = new WebSocket('ws://localhost:3000')
    ws.addEventListener('open',()=> {
        console.log('已连接服务器')
        ws.send('我是前端的数据')
    })
    ws.addEventListener('message', ({data})=> {
        console.log(data)
    })
</script>
</body>
</html>
javascript 复制代码
const WebSocket = require('ws')
const socket = new WebSocket.Server({port: 3000});

socket.on('connection',ws=> {
    console.log('我进来了')
    ws.on('message',(data)=> {
        console.log('前端数据:' + data + "。后端返回数据:"+ '我是后端的数据')
    })
    ws.on('close',()=> {
        console.log('溜了溜了')
    })
})

Socket.io

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具6 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端