【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 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax