JS_socket.io简单使用

安装socket.io

npm install --save socket.io

demo目录

├── index.js
├── node_modules
├── package.json
└── views└── index.html

服务端代码

./index.js

const http = require('http');
const fs = require('fs');
const socketIO = require('socket.io');
const server = http.createServer((req, res) => {let html = fs.readFileSync('./views/index.html');res.end(html);
}).listen(3000, '127.0.0.1', () => {console.log('socket.io server is running at http://127.0.0.1:3000/');
});// socket io 操作
const io = socketIO(server);
io.sockets.on('connection', (socket) => {console.log('socket.io connected');// 监听socket断开事件socket.on('disconnect', () => {console.log('socket.io disconnected');});// 轮询进行 服务端推送 自定义事件let serverNum = 0;setInterval(() => {serverNum++;socket.emit('server.message', { serverNum: serverNum });}, 1000);// 监听客户端推送 自定义事件socket.on('client.message', (data) => {console.log('[client.message]', data)});});

客户端代码

./views/index.html

<!DOCTYPE html>
<html><head><title>demo</title>
</head><body><h1>socket.io demo</h1><!-- <script src="/socket.io/socket.io.js"></script> --><script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script><script>const socket = io.connect('http://127.0.0.1:3000');// 监听 socket 连接事件socket.on('connection', () => {console.log('socket.io connected');socket.open();});// 监听 socket 断开事件socket.on('disconnect', () => {console.log('socket.io disconnected');socket.close();});let clientNum = 0;// 轮询 推送客户端信息 到服务端setInterval(() => {clientNum++;socket.emit('client.message', { clientNum: clientNum });}, 1000);// 监听服务端 自定义信息事件socket.on('server.message', (data) => {console.log('[server.message]', data)});</script>
</body></html>

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

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

相关文章

TikTok的生态封闭:如何应对新的商业格局

TikTok&#xff08;抖音国际版&#xff09;已经成为全球范围内最受欢迎的社交媒体平台之一&#xff0c;拥有数以亿计的活跃用户。然而&#xff0c;最近TikTok宣布了一项重大战略调整&#xff0c;即开始构建生态封闭&#xff08;walled garden&#xff09;模式。 这一变化将对出…

bit、bin 、mcs文件区别

FPGA里面的可执行文件都涉及到 *.bit&#xff0c; *.mcs&#xff0c; *.bin 和 *.elf。 bit文件 bit 文件一般用于JTAG在线进行调试的时候&#xff0c;是把bit文件是烧写到FPGA中进行在线调试。 bin文件 bin 文件是二进制文件&#xff0c;按顺序只包含原始字节流&#xff0c…

linux目录内容详解

目录 从上到下&#xff0c;你所看到的目录如下 /bin /bin 目录是包含一些二进制文件的目录&#xff0c;即可以运行的一些应用程序。 你会在这个目录中找到上面提到的 ls 程序&#xff0c;以及用于新建和删除文件和目录、移动它们基本工具。还有其它一些程序&#xff0c;等等。…

循环神经网络

循环神经网络&#xff08;Recurrent Neural Networks&#xff0c;RNN&#xff09;是一种强大的深度学习模型&#xff0c;适用于处理序列数据&#xff0c;如时间序列、文本、语音等。RNN具有记忆能力&#xff0c;可以捕捉序列中的时间依赖关系&#xff0c;并广泛应用于自然语言处…

批量剪辑视频:AI智剪技巧全掌握

在视频剪辑的工作中&#xff0c;我们常常需要处理大量的视频文件。传统的剪辑方式既耗时又费力&#xff0c;而如今&#xff0c;随着人工智能技术的发展&#xff0c;AI智剪成为了一种省时省力的视频剪辑方法。下面&#xff0c;我们就来详细了解一下如何使用固乔智剪软件进行批量…

UGUI画布加载优化

在Unity中&#xff0c;UGUI画布的加载优化可以通过以下几种方式来实现&#xff1a; 1. 合理使用画布渲染模式&#xff1a;UGUI画布有三种渲染模式&#xff0c;分别是Screen Space - Overlay、Screen Space - Camera和World Space。在使用时&#xff0c;应根据场景需求选择最适…

Linux下创建普通用户遇到的问题及解决办法

在Linux下只有root一个超级用户&#xff0c;但是可以创建多个普通用户的&#xff0c;具体的创建方法如下。 先切换到root用户&#xff0c;使用下面的命令创建用户名为user1(本文均以此用户名为例&#xff0c;注意后续键入指令时不要弄错了)的普通用户。 su root useradd user1 …

Flask: 上传文件的功能怎么做?

介绍 无论你是处理允许用户上传头像的社交媒体网站、管理用户文件的云存储服务,还是接收数据进行处理的企业应用程序,文件上传都是促进这些交互的基本功能。 Flask 是一个轻量级且灵活的 Python Web 框架,因其易用性和灵活性而成为开发人员的热门选择。它提供了一组强大的工…

Qt——对话框简介

对话框&#xff1a;交互界面的便捷窗口 在现代计算机应用程序中&#xff0c;对话框是用户界面设计的重要组成部分&#xff0c;用于与用户进行信息交互和数据输入。对话框可以分为独立对话框和定制对话框两大类&#xff0c;它们为用户和应用程序之间的交流提供了便捷的窗口。 …

数据结构(C语言)——栈的两种实现方式

下面来介绍栈的两种实现方式&#xff1a; 一、数组 #include<stdio.h> #include<stdlib.h> #define E int #define MAX_STACK 5 //数据结构-栈&#xff08;数组实现&#xff09; typedef struct my_stack {E *sta;//栈大小为5int pos;//栈顶位置 }my_stack; //初…

ARM的异常处理

概念 处理器在正常执行程序的过程中可能会遇到一些不正常的事件发生 这时处理器就要将当前的程序暂停下来转而去处理这个异常的事件 异常事件处理完成之后再返回到被异常打断的点继续执行程序 异常处理机制 不同的处理器对异常的处理的流程大体相似&#xff0c;但是不同的处理器…

linux 下 C++ 与三菱PLC 通过MC Qna3E 二进制 协议进行交互

西门子plc 有snap7库 进行交互&#xff0c;并且支持c 而且跨平台。但是三菱系列PLC并没有现成的开源项目&#xff0c;没办法只能自己拼接&#xff0c;我这里实现了MC 协议 Qna3E 帧&#xff0c;并使用二进制进行交互。 #pragma once#include <stdio.h> #include <std…

zTasker—简洁易用强大的定时热键一体自动化工具,效率倍增器

软件名称 zTasker 应用平台 PC Windows7及以上 一句简介 市面上定时类软件很多&#xff0c;但无一例外功能都很单一&#xff0c;要完成不同的任务&#xff0c;需要不同的软件 市面上的热键软件&#xff0c;要么功能少&#xff0c;要么像是AutoHotKey这样对于一般用户太专业…

分享篇:初识Canvas

目录 什么是Canvas&#xff1f; canvas的坐标 使用canvas的基本步骤​编辑 步骤&#xff1a; 1.需要一个canvas标签 代码演示&#xff08;方法1&#xff09; 代码演示&#xff08;方法2&#xff09; 2.需要获取 画笔 对象 &#xff08;获取 元素的 2D 上下文对象&#…

JavaScript获取字符串的字节长度

概要 提示&#xff1a;大家都知道&#xff0c;获取字符串的长度可用length来获取。 那么获取这段字符串的字节数呢&#xff1f;英文字母肯定lenght和字节数都一样&#xff1a;都是1而中文lenght1&#xff0c;字节数2因此&#xff0c;需要作的就是把中文字符的字节数计算出来。 …

通过RSYNC在linux和windows间同步文件

通过RSYNC在linux和windows间同步文件 下载windows版本rsync下载后是一个zip的压缩包&#xff0c;直接解压就可使用配置windows到linux的秘钥拷贝公钥文件到linux服务器&#xff0c;实现免密配置同步命令结合windows计划任务实现定时同步文件 下载windows版本rsync 下载链接 h…

[kingbase运维之奇怪的现象]

#[kingbase运维之奇怪的现象] ##奇怪的现象 某银行数据中心应用反馈&#xff0c;业务接口日志记录了很多执行慢的SQL&#xff0c;出现的时间是随机的&#xff0c;单独在数据库客户端工具执行会很快返回结果。根据之前的经验推断是业务代码传入的参数类型与数据库表结构字段定义…

Kubernetes Configmap + Secret

Secret是什么&#xff1f; 在Kubernetes中&#xff0c;Secret是一种用于存储敏感信息的资源对象。它主要用于保存密码、API令牌、密钥和其他敏感数据&#xff0c;以供容器、Pod或集群中的其他资源使用。 Secret有以下特点&#xff1a; 安全存储&#xff1a;Secret对象被用于安全…

算法训练第五十九天

503. 下一个更大元素 II - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {vector<int> nums1(nums.begin(), nums.end());nums.insert(nums.end(), nums1.beg…

【面试必刷TOP101】合并k个已排序的链表 判断链表中是否有环

目录 题目&#xff1a;合并k个已排序的链表_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;判断链表中是否有环_牛客题霸_牛客网 (nowcoder.com) 题目的接口…