当前位置: 首页 > article >正文

node.js-node.js作为服务器,前端使用WebSocket(单个TCP连接上进行全双工通讯的协议)

1.WebSocket全双工通信协议

        WebSocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议。让客户端和服务器间的数据交互变得简单,允许服务端向客户端主动推送数据。浏览器和服务器间只需要完成一次握手,两者间创建持久性的连接,并进行双向的数据传输

        WebSocket是在应用层实现的协议。握手过程中使用HTTP协议,握手成功升级为全双工通信通道,成功后WebSocket协议在应用层上定义消息格式和通信规则,通过传输层TCP协议上进行数据传输。

1.1 如何实现实时推送技术?

Ajax轮询:轮询分为(长轮询与短轮询)在特定的时间间隔,浏览器向服务器发送HTTP请求,服务器返回最新的数据给客户端。(缺点:需要不断向服务器发送请求,占用服务器资源和带宽)

WebSocket:js向服务器发出建立WebSocket连接请求,客户端与服务端通过TCP连接直接交换数据。

1.2 WebSocket主要的应用场景
  1. 实时通信:在线聊天,视频会议等
  2. 实时数据推送:新闻,体育赛事直播等,服务器可以主动向客户端推送更新数据
  3. 协同编辑:在线文档编辑的视线
  4. 在线游戏:需要实时推送更新游戏状态,提供低延迟的双向通信能力

具体的学习可以参考

HTML5 WebSocket | 菜鸟教程HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。 在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏..https://www.runoob.com/html/html5-websocket.html

2.WebSocket相关属性事件与方法

        获取WebSocket连接,通过send()方法向服务器发送数据,并通过onmessage事件接收服务器返回的数据。

2.1 创建WebSocket对象
var Socket = new WebSocket(url, [protocol] );

第一个参数url,指定连接的URL。第二个参数protocol,指定可接受的子协议。

 2.2 WebSocket对象属性(使用创建的Socket对象)
属性描述
Socket.readyState

只读属性 readyState 表示连接状态,可以是以下值:

  • 0 - 表示连接尚未建立。

  • 1 - 表示连接已建立,可以进行通信。

  • 2 - 表示连接正在进行关闭。

  • 3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

2.3  WebSocket事件(使用创建的Socket对象)
事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发
2.4 WebSocket方法(使用创建的Socket对象)
方法描述
Socket.send()

使用连接发送数据

Socket.close()

关闭连接

3. WebSocket(node.js作为服务器,js请求连接)

3.1 安装node.js与npm

根据电脑操作系统下载对应的版本。

3.2 初始化node.js项目

在新建项目文件目录下通过npm初始化项目。

npm init -y

npm-npm init与npm init -y区别与作用(初始化一个新的node.js项目)-CSDN博客文章浏览阅读43次。npm init与npm init -y区别与作用(初始化一个新的node.js项目) https://blog.csdn.net/2301_76671906/article/details/146195508?fromshare=blogdetail&sharetype=blogdetail&sharerId=146195508&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

3.3 在node.js项目中安装ws库
npm install ws

ws是流行在node.js中实现WebSocket协议的库。提供对应的AP来创建WebSocket服务器和客户端,实现实时双向通信。

3.4 创建WebSocket服务器-serve.js
// 引入WebSocket模块
const WebSocket = require('ws');

// 创建WebSocket服务器 监听8080端口
const wss = new WebSocket.Server({ port: 8080 });

// 当有新的客户端连接时 触发connection事件
wss.on('connection', (ws) => {
    console.log('新的客户端已连接');
    // 收到客户端消息时 触发message事件
    ws.on('message', (message) => {
        console.log('收到消息: %s', message);
        // 向所有客户端广播消息
        wss.clients.forEach((client) => {
            // 判断客户端是否处于连接状态
            if (client.readyState === WebSocket.OPEN) {
                // 向处于打开状态的客户端广播接收到的消息
                client.send(message);
            }
        });
    });
    // 当客户端断开连接时 触发close事件
    ws.on('close', () => {
        console.log('客户端断开连接');
    });
});

console.log('WebSocket服务器已启动,监听8080端口');
3.5 运行自定义接收传递服务器-serve.js

对应的node.js项目中运行

node server.js
3.6 前端html连接serve.js服务
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <input v-model="inputMessage" @input="sendMessage" placeholder="输入消息">
        <p>收到的消息: {{ receivedMessage }}</p>
    </div>

<script>
    // 创建WebSocket实例,连接到本地的8080端口
    const ws = new WebSocket('ws://localhost:8080');

    const app = new Vue({
        el: '#app',
        data: {
            inputMessage: '',
            receivedMessage: ''
        },
        methods: {
            sendMessage() {
                // 如果WebSocket连接已打开
                if (ws.readyState === WebSocket.OPEN) {
                    // 发送输入框中的内容
                    ws.send(this.inputMessage);
                }
            }
        }
    });
    // 当WebSocket连接成功时触发
    ws.onopen = function() {
        console.log('已连接到服务器');
    };
    // 当收到服务器发送的消息时触发
    ws.onmessage = function(event) {
        console.log('收到消息: ' + event.data);
        // 更新Vue实例中的receivedMessage变量
        app.receivedMessage = event.data;
    };
    // 当WebSocket连接关闭时触发
    ws.onclose = function() {
        console.log('连接已关闭');
    };
</script>
</body>
</html>

http://www.kler.cn/a/587892.html

相关文章:

  • Linux--git
  • 并发编程2
  • 【IntelliJ IDEA】idea导入node_modules卡死,idea 忽略 node_modules 索引
  • 如何用正则表达式爬取古诗文网中的数据(python爬虫)
  • 【NLP】 8. 处理常见词(Stopwords)的不同策略
  • 蓝桥杯---链表题目1
  • stack_queue常用接口及模拟实现
  • QT中的布局管理
  • 修复Electron项目Insecure Content-Security-Policy(内容安全策略CSP)警告的问题
  • 校园安全用电怎么保障?防触电装置来帮您
  • Ubuntu 22.04 上安装 Home Assistant
  • Linux centos 7 grub引导故障恢复
  • 2025-03-15 Python深度学习2——Numpy库
  • UI基础概念+Canvas相关知识
  • 【漫话机器学习系列】141.灵敏度(Sensitivity)
  • 如何手动使用下载并且运行 QwQ-32B-GGUF
  • 强大的CSS变量
  • LiveData 与 ViewModel 协同工作:从原理到面试实战
  • dns域名双栈解析
  • 【MySQL数据库】函数