JS 实现WebSocket通讯和什么是WebSocket

news/2024/11/17 19:08:19/

WebSocket

介绍:
WebSocket 是一种网络传输协议,可在单个 TCP 连接上进行全双工通信。它允许服务器主动向客户端推送信息,客户端也能实时接收服务器的响应。


客户端

这里实现了将input内的内容发送给客户端,并将接收到的服务器的消息显示在messages中

<div><!-- 接受消息 --><ul id="messages"></ul><input id="keywords" type="text"><button id="send">Send</button><button id="close">Close</button>
</div><script>javascript">const socket = new WebSocket('ws://localhost:9002');socket.addEventListener("open", function(event) {console.log('Connected to server');// socket.send('Hello from client');});socket.addEventListener("message", function(event) {console.log('Received message from server:'+ event.data);const li = document.createElement('li');li.textContent = event.data;messagesList.appendChild(li);});socket.addEventListener("close", function(event) {console.log('Connection closed');});// 发消息const sendBtn = document.getElementById('send');const closeBtn = document.getElementById('close');const keywordsInput = document.getElementById('keywords');const messagesList = document.getElementById('messages');sendBtn.addEventListener('click', function() {const message = keywordsInput.value;const data = JSON.stringify({user: 'Client1',message: message});socket.send(data);// const li = document.createElement('li');// li.textContent = message;// messagesList.appendChild(li);keywordsInput.value = '';});closeBtn.addEventListener('click', function() {socket.close();});
</script>

服务端
这里我自己写了个简单的node服务器来做测试

javascript">
const http = require('http');
const WebSocketServer = require('ws').Server;   const server = http.createServer();
const wss = new WebSocketServer({ server });// 接收其他请求
server.on('request', (req, res) => {res.end('Hello, world!');
});wss.on('connection', (ws) => {console.log('Client connected');ws.on('message', (data) => { console.log(`Received message: ${data}`);data = JSON.parse(data);// 实现websocket单发ws.send(`${data.user}: ${data.message}`);});ws.on('close', () => {  console.log('Client disconnected');});
});server.listen(9002, () => {console.log('Server started on port 9002');
});

效果:

在这里插入图片描述


有趣的来了,如果你想实现服务器给所有客户端群发消息,类似聊天对话的效果可以这么做:

javascript">// 实现websocket单发
ws.send(`${data.user}: ${data.message}`);

改为

javascript">// 实现websocket群发
wss.clients.forEach(function each(client) {client.send(`${data.user}: ${data.message}`);
});

聊天对话效果:

在这里插入图片描述


http://www.ppmy.cn/news/1547786.html

相关文章

两行命令搭建深度学习环境(Docker/torch2.5.1+cu118/命令行美化+插件),含完整的 Docker 安装步骤

深度学习环境的配置过于繁琐&#xff0c;所以我制作了两个基础的镜像&#xff0c;希望可以帮助大家节省时间&#xff0c;你可以选择其中一种进行安装&#xff0c;版本说明&#xff1a; base 版本基于 pytorch/pytorch:2.5.1-cuda11.8-cudnn9-devel&#xff0c;默认 python 版本…

React Native 全栈开发实战班 - 用户界面进阶之流行 UI 库使用与集成

在 React Native 应用开发中&#xff0c;使用现成的 UI 库可以显著提高开发效率&#xff0c;并确保应用界面的美观和一致性。React Native 生态系统中有许多优秀的 UI 库&#xff0c;如 React Native Paper、React Native Elements、NativeBase 等。本章节将介绍如何使用和集成…

Redis环境部署(主从模式、哨兵模式、集群模式)

一、概述 REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统&#xff0c;是跨平台的非关系型数据库。Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库…

yolov8目标检测如何设置背景/无标签图像参与训练

背景 在开发深度学习模型的时候&#xff0c;总有一些图像会造成误检&#xff0c;这时候就需要将这些误检的图像不进行标注加入训练&#xff0c;让模型知道这里是一个不需要检测的“背景”&#xff0c;减少模型的误检率。 而在网上搜了一大堆之后&#xff0c;发现并没有单独介绍…

ptrade财务数据

ptrade财务数据很多&#xff0c;这里只取最简单的形式 get_fundamentals(g.security, valuation) 估值数据 - valuation 字段名称字段类型字段说明属性trading_daystr交易日期固定返回total_valuestrA股总市值(元)固定返回float_valuestrA股流通市值(元)自选返回napsnumpy.flo…

HTML5:网页开发的新纪元

文章目录 前言一、HTML5技术概述二、主要特点及优势1. 多媒体支持2. 图形绘制3. 离线存储4. 表单控件增强5. 响应式设计 三、应用场景1. 游戏开发2. 在线教育3. 电子商务 四、面临的挑战结语 前言 在互联网技术快速发展的今天&#xff0c;H5&#xff08;HTML5的简称&#xff0…

【FPGA开发】AXI-Stream总线协议解读

文章目录 AXI-Stream概述协议中一些定义字节定义流的定义 数据流类别字节流连续对齐流连续不对齐流稀疏流 协议的信号信号列表 文章为个人理解整理&#xff0c;如有错误&#xff0c;欢迎指正&#xff01; 参考文献 ARM官方手册 《IHI0051B》 AXI-Stream概述 协议中一些定义 A…

【C++】list 与 string 基础与实现字符串操作

【C】使用 list 与 string 实现基础字符串操作 文章目录 一、字符串的基础操作1.1 - startsWith1.2 - endsWith1.3 - trim1.4 - indexOf1.5 - replaceAll 二、list 基础操作2.1 - 遍历2.1.1 - 使用迭代器访问2.1.2 - 使用基于范围的 for 循环遍历2.1.3 - 使用标准算法库遍历 2.…