使用node实现websocket

2023-09-15 23:21:20

使用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 client
  ws.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!');
更多推荐

HT for Web (Hightopo) 使用心得(7)- 3D场景环境配置(阴影,灯光,环境光)

在文章《Graph3dView环境配置-天空球,雾化,辉光,景深》中,我们介绍了在3D场景中的一些环境配置,包括天空球,雾化,辉光,景深等。本篇文章我们继续补充其他的环境参数:阴影灯光环境光由于本人缺乏艺术细胞,文章中配置的环境参数仅为了说明效果及如何实现。如果由专业的设计师相信会调配出更加赏心悦目的效果。阴影:阴影即

[C++] Reference

C++中引用(Reference)引用是C++中的一个重要概念,它允许您使用一个已存在的变量名来引用另一个变量的值,而无需创建新的变量。以下是有关C++引用的一些关键点:**1.声明引用:**引用通过`&`符号声明,例如:`int&ref=x;`,其中`ref`是一个对整数`x`的引用。**2.别名:**引用可以被看作

走进JVM的内存模型

1、概述:我们在用Java语言进行编程时,并没有像C/C++程序这样为每一个new操作去写对应的delete/free操作。这得益于Java程序把内存控制权利交给JVM虚拟机,一旦出现内存泄漏和溢出方面的问题,如果不了解虚拟机是怎样使用内存的,那么排查错误将会是一个非常艰巨的任务。2、JVM内存模型:JVM虚拟机在执行

基于AR增强现实模拟离心泵结构拆装与运行

通过AR模拟,学生可以虚拟地观察离心泵的结构和部件,进行拆装、安装和调试的操作,而无需实际接触物理设备。这极大地降低了学生操作过程中的风险。AR模拟离心泵的拆装过程可以分为几个步骤。首先,学生选择相应的模拟程序,然后通过平板/手机所显示的虚拟画面来观察离心泵的结构和部件。在模拟拆装过程中,学生可以用手势操作来选择需要拆

Mixin 混入

Mixin混入混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。怎么理解呢,就是每一个组件都会有一些选项data、computed、methods…对吧,假设我有10个组件,每一个组件内

RabbitMQ及各种模式

目录一、MQ的基本概念1.1MQ概述1.2MQ的优势和劣势1.3MQ的优势1.应用解耦2.异步提速3.削峰填谷1.4MQ的劣势小结1.5常见的MQ产品1.6RabbitMQ简介1.7JMS小结二、RabbitMQ管控台三、HelloWorld简单模式​编辑1、生产者​编辑2、消费者​编辑四、Workqueues工作队列

CRM软件系统维护客户的主要方法

客户的重要性,相信每一个做企业的人都非常清楚。为了维护好客户,很多企业都使用CRM客户管理系统,建立“以客户为中心”的经营理念,提高企业客户服务水平,进而在提高客户满意度的同时提高企业的盈利。那么,企业如何通过CRM系统维护客户?1、客户信息管理CRM作为客户管理系统,它的主要功能就是对客户信息的收集和管理。CRM系统

超全面的前端工程化配置指南

前端工程化配置指南本文讲解如何构建一个工程化的前端库,并结合GithubActions,自动发布到Github和NPM的整个详细流程。示例我们经常看到像Vue、React这些流行的开源项目有很多配置文件,他们是干什么用的?他们的Commit、Release记录都那么规范,是否基于某种约定?废话少说,先上图!上图标红就是

使用branch and bound分支定界算法选择UTXO

BnB算法原理分支定界算法始终围绕着一颗搜索树进行的,我们将原问题看作搜索树的根节点,从这里出发,分支的含义就是将大的问题分割成小的问题。大问题可以看成是搜索树的父节点,那么从大问题分割出来的小问题就是父节点的子节点了。分支的过程就是不断给树增加子节点的过程。而定界就是在分支的过程中检查子问题的上下界,如果子问题不能产

伦敦银一手是多少?

伦敦银是以国际现货白银价格为跟踪对象的电子合约交易,无论投资者通过什么地方的平台进入市场,执行的都是统一国际的标准,一手标准的合约所代表的就是5000盎司的白银,如果以国内投资者比较熟悉的单位计算,那约相当于15.5公斤的白银。至于一手伦敦银合约的总价值是多少,具体的数值会根据国际银价的波动而变化。如果以近期每盎司25

python经典百题之求数字位数及逆序打印

题目:给一个不多于5位的正整数,要求:一、求它是几位数,二、逆序打印出各位数字程序分析我们需要编写一个程序,能够接受不多于5位的正整数,然后分析其位数,并逆序打印出各位数字。可以利用取模和除法运算来实现逆序打印数字,同时通过不断除以10的方式确定位数。方法1:使用取模和除法defreverse_print(num):p

热文推荐