使用node实现websocket

使用node实现websocket

什么是websocket

websocket代表了Web应用程序通信方式的根本转变。不同于传统的HTTP请求响应周期,即客户端从服务器请求数据并等待响应,websocket在客户端和服务器之间建立一个持久的全双工连接。这意味着一旦建立了websocket,数据可以在任何时候双向流动,而不需要重复请求。

Web Socket使用了一个名为websocket的特定协议,该协议在单一的TCP连接上运行。客户端和服务器之间的初步握手,类似于http请求,是遵循传统请求-响应模式的唯一部分。一旦建立了连接,它将保持开放,以便进行即时和有效的数据交换。

在这里插入图片描述

websocket如何工作

要理解websocket是如何工作的,我们可以想象在Web应用程序和服务器之间存在一个电话通信。不同于打电话,等待回答,然后说话,websocket让我们有一个连续的对话,客户端和服务器都可以在不等待提示的情况下互相发送消息。

这种双向通信对于实时应用来说特别强大。例如,在聊天应用程序中,可以立即将消息从一个用户传送给其他用户,而不会延迟。在线多人游戏可以实时同步玩家在设备间的动作。

websocketWeb带来了一种新的交互方式,使之有可能构建能够实时更新和显示信息的动态响应应用程序。他们已经成为创造现代网络体验的基石技术。

使用node实现

建立服务器

首先,创建一个新的js项目,并安装必要的库:express库用于搭建服务端,ws库用于建立websocket通信:

npm init
npm install express
npm install ws

接下来,创建一个快速应用程序并设置一个基本的HTTP服务器:

const express = require('express');
const http = require('http');
const WebSocket = require('ws');const app = express();
const server = http.createServer(app);// 服务器路由server.listen(3000, () => {console.log('Server listening on port 3000');
});

建立websocket

使用ws库创建一个与HTTP服务器一起工作的websocket服务器。

const wss = new WebSocket.Server({ server });// 处理ws的连接
wss.on('connection', (ws) => {console.log('WebSocket connected');// 处理ws接受到的消息ws.on('message', (message) => {console.log(`Received: ${message}`);// 发送消息ws.send(`Server received: ${message}`);});
});

让我们讲解上面的代码:

wss.on('connection', (ws) => {console.log('WebSocket connected');// 这段代码在每个客户端连接都会执行
});

上面的代码在WSS服务器上为websocket连接设置了一个侦听器。当一个客户端连接到服务器时,将执行提供的回调函数。

在这个回调函数中,我们可以在建立连接时执行操作。在本例中,当客户端连接时,它只需记录一条消息。

在连接回调中,有一个事件侦听器用于websocket消息事件。此事件是在客户端向服务器发送消息时触发的。

ws.on('message', (message) => {console.log(`Received: ${message}`);// Sending a response to the clientws.send(`Server received: ${message}`);
});

当从客户端接收到消息时,服务端将消息记录到控制台。然后使用向同一个客户端发送响应。这允许客户机和服务器之间的双向通信。

客户端设置

在客户端,我们可以像这样连接到ws服务器:

const socket = new WebSocket('ws://localhost:3000');// 处理服务端发送的消息
socket.addEventListener('message', (event) => {console.log(`Received from server: ${event.data}`);
});// 发送消息给服务端
socket.send('Hello, server!');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79612.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode【4. 寻找两个正序数组的中位数】

快乐安康 给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 public double findMedianSortedArrays(int[] nums1, int[] nums2) {if (nums1.length &…

如何实现 pdf 转 word

前言:最直接的方式 wps 充会员可以直接转,但是单纯为了 使用这个功能有没啥必要 pdf转word方法 在线转换wps转换其他收费转换方式 在线转换 介绍在线转换,虽然样式简陋但是可以转换成功,转换以后也没有失真 http://ssyr.mynatap…

linux安装sqoop

一 解压安装包 这里提供了网盘资源 链接: https://pan.baidu.com/s/1QkFqVnlvuOJ_aB2bjn-OKg?pwducsy 提取码: ucsy 这里有两个压缩包,sqoop-1.4.7.tar.gz是 sqoop 的安装包,另一个是我们需要里面的一些 jar 包 解压 安装包 tar -zxf ./sqoop-1.4.7.t…

1-FPGA硬件加速-YUV_YCbCr

这是对《基于Matlab与FPGA的图像处理教程》的学习笔记,代码和内容摘取自书中。 心得: 使用FPGA进行硬件加速的重点是消除或者减少浮点数运算,转换为定点运算,然后通过pipeline流水设计转为并行实现加速。 原理和方法 RGB与&…

使用原生的js实现分享功能,代码非常精简

分享一个原生的js实现移动端分享功能,希望大家喜欢。 兼容性: 实现代码: function share(){ if (!navigator.share) { alert("您当前浏览器不支持分享!"); } else { navigator.share({title: {$title},text: {$introd…

Vue2面试题100问

Vue2面试题100问 Vue2面试题100问1.简述一下你对Vue的理解2.声明式和命令式编程概念的理解3.Vue 有哪些基本特征4.vue之防止页面加载时看到花括号解决方案有哪几种?5.Vue中v-for与v-if能否一起使用?6.vue中v-if与v-show的区别以及使用场景7.v-on可以监听…

Docker--未完结

一.Docker是干什么的 在没亲自使用过之前,再多的术语也仅仅是抽象,只有写的人或者使用过的人能看懂。 所以,作为新手来说,只要知道Docker是用于部署项目就够了,下面展示如何用Docker部署项目及Docker常用命令。 二、…

冠达管理:庄家最怕的8个方法?

在股票商场上,庄家总是短时刻内操控价格,并在一定的时刻内进出股市,以赚取巨额赢利。 假如想在股票商场上盈余,那么就必须站在庄家的对立面,把握一些防护和反击的办法。这里就来介绍一些庄家最怕的办法。 一、技能剖析…

【自学开发之旅】Flask-restful-Jinjia页面编写template-回顾(五)

restful是web编程里重要的概念 – 一种接口规范也是一种接口设计风格 设计接口: 要考虑:数据返回、接收数据的方式、url、方法 统一风格 rest–表现层状态转移 web–每一类数据–资源 资源通过http的动作来实现状态转移 GET、PUT、POST、DELETE path…

使用Docker构建轻量级Linux容器

Docker是一个开源的容器化平台,可以帮助用户快速创建、部署和管理应用程序的轻量级Linux容器。通过Docker,用户可以将应用程序及其所有依赖项打包成一个独立的容器镜像,并在各种环境中运行,无需担心环境差异和依赖冲突。下面将详细…

R语言分析糖尿病数据:多元线性模型、MANOVA、决策树、典型判别分析、HE图、Box's M检验可视化...

全文链接:https://tecdat.cn/?p33609 Reaven和Miller(1979)研究了145名非肥胖成年人的葡萄糖耐量和胰岛素血液化学指标之间的关系。他们使用斯坦福线性加速器中心的PRIM9系统将数据可视化为3D,并发现了一个奇特的图案&#xff0c…

h5开发网站-页面内容不够高时,如何定位footer始终位于页面的最底部

一、问题描述: 在使用h5开发页面时,会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,影响用户视觉。想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来控…

VMware16安装ghost版win7

文章目录 准备工作GHO 文件装机工具 新建虚拟机配置虚拟机还需要一个 CD/DVD PE 安装步骤分区还原挂载 CD/DVD开始还原 还原之后 准备工作 GHO 文件 可以去百度搜索这种文件,我这里是从系统之家下载的deepin win7 ghost 系统 装机工具 因为下载的 ghost 版的 w…

【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

系列文章目录 【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包…

计算机丢失mfc140u.dll怎么办,mfc140u.dll丢失的解决方法分享

随着科技的飞速发展,计算机已经成为了人们日常生活和工作中不可或缺的工具。然而,在使用计算机的过程中,用户可能会遇到各种问题,其中计算机丢失 mfc140u.dll 无法运行的问题就是一个比较常见的困扰。小编将从以下几个方面对这个问…

数据中心液冷服务器详情说明

目录 前言 何为液冷服务器? 为什么需要液冷? 1.数据中心降低PUE的需求 2.政策导向 3.芯片热功率已经达到风冷散热极限 4.液冷比热远大于空气 液冷VS风冷,区别在哪? 1.液冷服务器跟风冷服务器的区别 2.液冷数据中心跟风冷…

postman导入json脚本文件(Collection v1.0、Collection v2.0)

1. 以postman v8.5.1 版本为例 2. 在postman v5.0.2 低版本中导出json脚本文件, 请选择Collection v2.0 Export - Collection v2 3. 在postman v8.5.1 版本 导入 json脚本文件 Import - Collection v2 - Export - Import

redis缓存穿透、击穿、雪崩介绍

缓存穿透 概念 缓存穿透指某一特定时间批量请求打进来并访问了缓存和数据库都没有的key,此时会直接穿透缓存直达数据库,从而造成数据库瞬时压力倍增导致响应速度下降甚至崩溃的风险; 解决方案 一、通过布隆过滤器解决 原理:将…

React 全栈体系(七)

第四章 React ajax 一、理解 1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装) 2. 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻…

vue 使用canvas 详细教程

Vue.js 中使用 Canvas Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据,同时也支持与其他库和工具的集成。要在 Vue.js 中使用 Canvas,您可以按照以下步骤进行操作: 在 Vue.js …