node.js: ws服务端和WebSocket客户端交互示例

简介: node.js: ws服务端和WebSocket客户端交互示例

文档

  • 服务端使用: ws: a Node.js WebSocket library
  • 客户端使用: WebSocket

服务端

安装依赖

pnpm i ws

修改 package.json

"type": "module",

server.js

import { WebSocketServer } from "ws";
const wss = new WebSocketServer({ port: 8080 });
wss.on("connection", function (ws) {
  // 接收消息 Buffer
  ws.on("message", function (data) {
    console.log(data);
    console.log("received: %s", data);
    // 返回消息
    ws.send(data.toString());
  });
  // 断开连接
  ws.on("close", function () {
    console.log("close");
  });
});

启动服务端

node server.js

客户端

index.html

<script>
    // 创建一个 WebSocket 连接
    const ws = new WebSocket('ws://localhost:8080');
    // 监听连接成功
    ws.addEventListener('open', function(){
        console.log('open');
        ws.send('Hello!')
    })
    // 监听返回的消息
    ws.addEventListener('message', function(event){
        console.log(event.data);
    })
    // 监听断开连接
    ws.addEventListener('close', function(event){
        console.log('断开连接');
    })
</script>
相关文章
|
1月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
35 5
|
20天前
|
JavaScript 前端开发 网络协议
Vue.js 与 WebSocket 的惊世联姻!实时数据通信的震撼变革,你敢错过?
【8月更文挑战第30天】在现代Web开发中,实时数据通信至关重要。Vue.js作为流行前端框架,结合WebSocket技术,实现了高效实时的数据交互。本文简要介绍了WebSocket原理及其在Vue.js项目中的应用方法,包括建立连接、监听事件及数据处理等步骤,展示了如何利用二者结合轻松应对实时聊天、股票更新等多种场景,为开发者提供了实用指南。希望本文能帮助您更高效地实现Web应用的实时通信功能。
80 0
|
18天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
18 2
|
20天前
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`&lt;transition&gt;`和`&lt;transition-group&gt;`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
31 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
|
1月前
|
JavaScript 前端开发 网络协议
抖音直播弹幕数据逆向:websocket和JS注入
抖音直播弹幕数据逆向:websocket和JS注入
136 1
|
19天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
28 0
|
1月前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
1月前
|
存储 JavaScript 前端开发
2D物理引擎 Box2D for javascript Games 第三章 刚体的交互
2D物理引擎 Box2D for javascript Games 第三章 刚体的交互
|
2月前
|
存储 前端开发 Go
golang怎么搭建Websocket聊天室服务端
连接的添加和移除 添加连接: 当一个新的WebSocket连接建立时,服务器需要将这个连接添加到全局的连接列表中。多个连接可能同时建立,从而导致多个并发操作试图修改连接列表。 移除连接: 当一个WebSocket连接断开时,服务器需要将这个连接从全局的连接列表中移除。如果多个连接同时断开,可能会导致并发修改连接列表。
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法