首页 > 编程语言 >基于Node.js和ws库搭建WebSocket服务并实现消息互通的简单示例

基于Node.js和ws库搭建WebSocket服务并实现消息互通的简单示例

时间:2024-04-03 11:03:42浏览次数:29  
标签:Node function WebSocket 示例 js ws 服务器

环境要求:

  • Node.js环境安装
  • npm(Node.js的包管理器)

步骤:

  1. 安装Node.js:如果你还没有安装Node.js,请从Node.js官网下载并安装。

  2. 创建项目:创建一个新的目录作为项目文件夹,并在该目录下初始化一个新的Node.js项目。

        mkdir my-websocket-server
        cd my-websocket-server
        npm init -y
    3. 安装WebSocket库:使用npm来安装ws库。

        npm install ws
    4. 创建WebSocket服务端:在项目目录中创建一个名为server.js的文件,并添加以下代码:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    // 广播消息到所有客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.send('你已连接到WebSocket服务器');
});

console.log('WebSocket服务正在监听8080端口...');
这段代码创建了一个监听8080端口的WebSocket服务器。服务器会接收客户端发送的消息,并将它广播给所有其他已连接的客户端。

5. 运行WebSocket服务端:在终端中运行服务端代码 

node server.js
6. 创建WebSocket客户端
可以使用任何支持WebSocket的客户端来连接这个服务器。这里我们以浏览器为例,创建一个简单的HTML页面作为客户端。

在项目目录中创建一个名为client.html的文件,并添加以下代码:

<!DOCTYPE html>
<html>
<body>
  <script>
    var ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('连接服务器成功!');
      ws.send('你好,服务器!');
    };

    ws.onmessage = function(evt) {
      console.log('收到服务器消息:' + evt.data);
    };

    ws.onclose = function() {
      console.log('与服务器断开连接');
    };

    ws.onerror = function(err) {
      console.error('连接出错:', err);
    };
  </script>
</body>
</html>

这个HTML页面会在打开时尝试连接到WebSocket服务器,并在连接成功后发送一条消息。它还能够接收并显示从服务器收到的消息。

7. 打开客户端页面
使用浏览器打开client.html文件,你应该能在控制台中看到与WebSocket服务器的交互过程。

标签:Node,function,WebSocket,示例,js,ws,服务器
From: https://blog.csdn.net/weixin_49822873/article/details/137334867

相关文章

  • R语言 基于人口的医师配置公平性洛伦兹曲线的代码和示例
    文章目录前言一、洛伦兹曲线介绍二、基于人口的医师配置洛伦兹曲线    1.创建模拟数据    2.绘制洛伦兹曲线总结前言洛伦兹曲线(LorenzCurve)是一种用于描述资源分配公平性的图形表示方法,可用于评价卫生技术人员的分布公平性。洛伦兹曲线可以......
  • R语言 基于人口的医师配置公平性基尼系数计算代码和示例
    文章目录前言一、基尼系数原理介绍二、基于人口的医师配置基尼系数计算步骤    1.自定义建立基尼系数计算函数     2.运用基尼系数计算函数进行计算    3.使用模拟数据进行示例......
  • 第十一篇【传奇开心果系列】Python自动化办公库技术点案例示例:深度解读Python自动化操
    传奇开心果博文系列系列博文目录Python自动化办公库技术点案例示例系列博文目录前言一、重要作用二、Python操作PDF文件转Word文档介绍三、提高效率示例代码四、保持一致性示例代码五、精确度与质量控制示例代码六、适应复杂需求示例代码七、可扩展性与与集成性示例代码......
  • js实现websocket断线重连功能
    在项目开发中我们可能经常要使用websocket技术,当连接发生断线后,如果不进行页面刷新将不能正常接收来自服务端的推送消息。为了有效避免这种问题,我们需要在客户端做断线重连处理。当网络或服务出现问题后,客户端会不断检测网络状态,如果服务恢复,客户端则会自动重新连接,并断开......
  • Node打开选择文件夹弹框
    Node打开选择文件夹弹框发布于 2023-03-2910:39:122.7K0举报文章被收录于专栏:clzNode打开选择文件夹弹框前言用脚手架的那套东西写了一个工具,但是想要一个用Node去打开选择文件夹弹框的效果,来设置操作根目录。但是,Node本身没有这个API。node执行pytho......
  • vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能,vue3+ant后台管理
    效果图在vue3+antdesignvue后台管理系统中,详细完成菜单导航+面包屑动态联动功能效果,支持缓存功能、配置简洁、自动跟随route路由进行变化、自动匹配菜单和面包屑导航的文字等,超详细实用的示例demo全部源代码。提供详细示例源代码,新手小白直接复制稍微改下配置就能用了,快......
  • nvm安装node
    一、安装nvmlinux安装编辑文件/etc/hosts199.232.68.133raw.githubusercontent.com199.232.68.133user-images.githubusercontent.com199.232.68.133avatars2.githubusercontent.com199.232.68.133avatars1.githubusercontent.com新增上面这一步的目的是为了避免出......
  • nodejs在谷歌浏览器中调试
    一.浏览器开启实验室模式在谷歌浏览器中输入网址<chrome://flags/>,进入页面后打开该功能。二.配置js文件我用的是pycharm,首先对需要调试的js文件进行配置,然后填入--inspect-brk三.调试jsDebugger要调试的js文件,然后在谷歌浏览器中新打开一个标签页,打开开发者工具,等待nod......
  • vue2 +element-ui图片上传示例
    这里使用了一个没有用的裁剪插件,需要先下载它[email protected]然后在main.js引入:importVueCropperfrom'vue-cropper'Vue.use(VueCropper)1、html部分:<template><el-formref="form":model="form"label-width="1.2rem&qu......
  • nodeJs 实现视频的转换(超详细教程)
    前段时间拿到一个视频是4k的,没法播放,于是通过node.js  和 ffmpeg实现了视频的转换。在win10系统下实现。所需工具node16.19直接安装ffmpeg-5.1.1-essentials_build解压后重名ffmpeg放到C盘然后配置下环境变量Git-2.42.0.2-64-bit直接安装安装完建一个demo......