webScoket

news2024/9/25 11:22:40

 webScoket是什么?


  • 支持端对端通讯
  • 可以由客户端发起,也可以有服务端发起
  • 用于消息通知、直播间讨论区、聊天室、协同编辑等

做一个简单的webScoket


客户端配置: 

1、新建一个页面叫web-scoket.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webScoket</title>
</head>
<body>
    <p>webScoket</p>
    <button id="btn-send">发送消息</button>
    <script>
        const btnSend = document.getElementById('btn-send')
    </script>
</body>
</html>

服务器端配置: 

1、进入一个目录执行npm init -y

注意:执行以上命令,会生成一个package.json的文件

{
  "name": "web-scoket-sever",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、安装ws和nodemon插件、以下是安装插件的命令 

sudo cnpm i ws
sudo cnpm i nodemon

3、在文件夹下新建一个src目录,在src目录下新建index.js文件 

const { WebSocketServer } = require('ws')

//new 一个webScoket服务,端口号为3000
const wsServer = new WebSocketServer({ port: 3000 })

//监听连接connection,
wsServer.on('connection', wx => {
    console.info('connection');

    //监听信息,msg客户端传递过来的信息
    wx.on('message', msg => {
        console.info('收到信息', msg);

        //收到信息2秒后,给客户端一个反馈
        setTimeout(() => {

            //we.send给客户端发送信息
            we.send('服务端已收到信息!' + msg.toString())
        }, 2000)
    })
})

4、修改package.json文件中的代码

 "dev": "nodemon src/index.js"

5、代码执行npm run dev启动服务

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

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

相关文章

P7243 最大公约数

题目 思路 利用曼哈顿原理求离&#xff08;x&#xff0c;y&#xff09;最远的点 代码 #include<bits/stdc.h> using namespace std; #define int long long #define INF 0x3f3f3f3f const int maxn2005; int gcd(int a,int b) { return b?gcd(b,a%b):a; } int n,m; i…

华为OD机试真题 JavaScript 实现【输入整型数组和排序标识,对其元素按照升序或降序进行排序】【牛客练习题】

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、JavaScript算法源码 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试&#xff0c;发现新题目&#x…

RK3566 使能NPU

一、硬件 确定VDD_NPU所用的电源 用的是PMIC的DC-DC2 二、SDK 1、修改板级配置DTS文件 配置vdd_gpu vdd_gpu: DCDC_REG2 {regulator-always-on;regulator-boot-on;regulator-min-microvolt <500000>;regulator-max-microvolt <1350000>;regulator-init-microv…

[threejs]相机与坐标

搞清相机和坐标的关系在threejs初期很重要&#xff0c;否则有可能会出现写了代码&#xff0c;运行时一片漆黑的现象&#xff0c;这种情况就有可能是因为你相机没弄对。 先来看一下threejs中的坐标(世界坐标) 坐标轴好理解&#xff0c;大家只需要知道在three中不同颜色代表的轴…

python-pytorch基础之cifar10数据集使用图片分类

这里写目录标题 总体思路获取数据集下载cifar10数据解压包文件介绍加载图片数字化信息查看数据信息数据读取自定义dataset使用loader加载建模训练测试建测试数据的loader测试准确性测试一张图片读取一张图片加载模型预测图片类型创建一个预测函数随便来张马的图片结果其他打开一…

java实现钉钉群机器人@机器人获取信息后,机器人回复

1.需求 鉴于需要使用钉钉群机器人回复&#xff0c;人们提出的问题&#xff0c;需要识别提出的问题中的关键词&#xff0c;后端进行处理实现对应的业务逻辑 2.实现方式 用户群机器人&#xff0c;附带提出的问题&#xff0c;后端接收消息后识别消息内容&#xff0c;读取到关键…

亚马逊、虾皮、Lazada、速卖通、阿里国际等跨境电商平台怎么获取优质评价?

在跨境电商平台上&#xff0c;产品的评价直接影响卖家账户的评定因素&#xff0c;同时也影响产品页面的曝光量和流量&#xff0c;从而对产品销量产生影响&#xff0c;因此&#xff0c;产品评价的重要性不言而喻&#xff0c;除了产品的图片、描述、详情、广告和站外推广&#xf…

Java throw和throws 关键字

在Java中&#xff0c;异常可以分为两种类型&#xff1a; 未检查的异常&#xff1a;它们不是在编译时而是在运行时被检查&#xff0c;例如&#xff1a;ArithmeticException&#xff0c;NullPointerException&#xff0c;ArrayIndexOutOfBoundsException&#xff0c;Error类下的异…

[Docker实现测试部署CI/CD----相关服务器的安装配置(2)]

目录 6、Jenkins安装配置安装jdk安装maven拉取镜像启动jenkins修改数据卷权限浏览器访问安装插件配置jenkins移动JDK和Maven配置JDK和Maven 6、Jenkins安装配置 Jenkins 是一个开源软件项目&#xff0c;是基于 Java 开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&…

MySQL 的解析器以及 MySQL8.0 做出的改进 | StoneDB技术分享 #2

设计&#xff1a;小艾 审核&#xff1a;丁奇 编辑&#xff1a;宇亭 作者&#xff1a;柳湛宇&#xff08;花名&#xff1a;乌淄&#xff09; 浙江大学-软件工程-在读硕士、StoneDB 内核研发实习生 一、MySQL 的解析器 MySQL 所使用的解析器&#xff08;即 Lexer 和 Parser …

⛳ Java多线程 一,线程基础

线程基础 ⛳ Java多线程 一&#xff0c;线程基础&#x1f43e; 一&#xff0c;线程基础&#x1f4ad; 1.1&#xff0c;什么是程序&#xff0c;进程&#xff0c;线程&#x1f3ed; 1.2&#xff0c;什么是并行和并发&#x1f463; 1.3&#xff0c;线程使用的场景&#x1f3a8; 1.…

Nginx 15分钟入门

1、反向代理和负载均衡 Nginx 反向代理 负载均衡 网站初期用户量较少的时候&#xff0c;一台服务器就够用&#xff0c;但是当大量用户注册&#xff0c;那么显然一台机器就不够了。如下图&#xff0c;我们把同一个项目部署在3台服务器上。那么问题又来了&#xff0c;用户A的请…

连锁门店新零售管理系统服务商,提供新零售商城一体化解决方案|亿发

新零售时代&#xff0c;客户需求和购物方式正在发生翻天覆地的变化&#xff0c;数字化运营服务成为连锁门店增强竞争力的有效工具。那么&#xff0c;我们该如何借助数字化力量&#xff0c;升级连锁门店的新零售运营服务&#xff0c;迎接未来的商业挑战呢&#xff1f;一、智慧新…

emWin - BMP图片显示

BmpCvt.exe 用途 利用BMP图片&#xff0c;进行GUI显示&#xff1b;ICON等图标都是小BMP图片&#xff0c;核心是将BMP图片&#xff0c;转成emWin支持的方式&#xff0c;最终显示到TFT屏上 使用BmpCvt.exe工具&#xff0c;将各个图片转成相应的C文件. emWin有关的工具&#xff…

P4780 Phi的反函数

题目 思路 φ(x)n 当指数均为1时n最小 证明&#xff1a;容斥原理 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn1e9; int ansINT_MAX,n; bool f; map<int,bool> mp; bool is_prime(int n){if(n<1) return false;fo…

Web功能测试之表单、搜索测试

初入职场接触功能测试老是碰到以下情况不知道怎么写测试用例&#xff1a; 一个界面很多搜索条件怎么写用例&#xff1f; 下拉框测试如何考虑测试点&#xff1f; 上传要考虑哪些验证点&#xff1f;...... 所以这篇主要是整理关于web测试之表单、搜索测试的相关要点。 一、表…

个性定义轻松掌控,更适合PC玩家的游戏鼠标,雷柏VT350S体验

喜欢玩PC游戏的玩家都知道&#xff0c;一款好的鼠标可以在游戏中更加游刃有余&#xff0c;甚至扭转乾坤。但是&#xff0c;有线鼠标总是让人觉得不够灵活&#xff0c;无线鼠标又担心延迟和续航。那么&#xff0c;有没有一款无线鼠标既能满足游戏需求&#xff0c;操作又能随心所…

话费充值系话费直充系统源码支付快充慢充系统运营商接口

话费充值系话费直充系统源码支付快充慢充系统运营商接口

小程序学习(五):WXSS模板语法

1.什么是WXSS WXSS是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS 2.WXSS和CSS的关系 WXSS模板样式-rpx 3.什么是rpx尺寸单位 4.rpx的实现原理 5.rpx与px之间的单位换算* WXSS模板样式-样式导入 6.什么是样式导入 使用WXSS提供的import语法,可以导入外联的样式…