首页 > 编程语言 >nodejs websocket

nodejs websocket

时间:2024-04-02 11:44:51浏览次数:23  
标签:const nodejs value ws send msg obj websocket

github: 库地址

node后端:

interface msgType {
  from: string;
  to: string;
  msg: string;
}
export class Server {
  private ws = require("nodejs-websocket");
  private connections: { nickname: string; con: any }[] = [];
  constructor() {
    this.startServer();
  }
  public send(msg: msgType) {
    const dest = this.connections.find((val) => val.nickname === msg.to);
    if (!dest) return;
    dest.con.send(JSON.stringify(msg));
  }
  public receive() {}
  private startServer() {
    this.ws
      .createServer((conn: any) => {
        let init: boolean = false;
        conn.on("text", (str: string) => {
          const obj = JSON.parse(str) as msgType;
          if (!init) {
            init = true;
            const exist = this.connections.find(
              (val) => val.nickname === obj.from
            );
            if (!exist)
              this.connections.push({ nickname: obj.from, con: conn });
            else exist.con = conn;
            console.log("new connection: " + obj.from);
          }

          this.send(obj);
        });
        conn.on("close", function (code: any, reason: any) {
          console.log(code, reason);
        });
        conn.on("error", function (code: any, reason: any) {
          console.log(code, reason);
        });
      })
      .listen(8080);
  }
  public closeServer() {
    this.connections.forEach((val) => val.con.close());
    this.ws.closeServer();
  }
}

前端:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      input {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <input type="text" id="from" value="" />
    <input type="text" id="to" value="" />
    <input type="text" id="msg" value="hi!" />
    <button onclick="send()">send</button>
    <div id="history"></div>
    <script>
      const ws = new WebSocket("ws://127.0.0.1:8080");
      const history = document.querySelector("#history");
      ws.onopen = () => {
        console.log("open");
      };
      ws.onmessage = (e) => {
        const obj = JSON.parse(e.data);
        history.innerHTML = history.innerHTML +=
          "<br />" + JSON.stringify(obj.msg);
      };
      ws.onclose = () => {
        console.log("close");
      };
      ws.onerror = (e) => {
        console.log(e, "error");
      };
      const user1 = () => {
        from.value = "user1";
        to.value = "user2";
      };
      const user2 = () => {
        from.value = "user2";
        to.value = "user1";
      };

      if (localStorage.getItem("identity")) {
        user2();
      } else {
        user1();
      }
      const send = () => {
        const obj = {
          from: from.value,
          to: to.value,
          msg: msg.value,
        };
        if (!(obj.from && obj.to && obj.msg)) {
          alert("missing value");
          return;
        }
        ws.send(JSON.stringify(obj));
      };
    </script>
  </body>
</html>

 

标签:const,nodejs,value,ws,send,msg,obj,websocket
From: https://www.cnblogs.com/laremehpe/p/18110250

相关文章

  • Fiddler可以捕获和分析WebSocket通信
    自动化测试WebSocket接口使用Fiddler捕获WebSocket流量的步骤如下:其他WebSocket调试工具:用python的`websockets`库连接到ws接口:Fiddler可以捕获和分析WebSocket通信。Fiddler是一个功能强大的HTTP调试代理工具,广泛用于捕获HTTP和HTTPS网络流量。从它的较......
  • WebSocket连接
    启动类增加注解并进行Bean注入@EnableWebSocket@BeanpublicServerEndpointExporterserverEndpointExporter(){ returnnewServerEndpointExporter();}packagecom.hwd.campus.security.biz.websocket;importcom.hwd.campus.security.biz.utils.WebsocketUtil;impor......
  • nodejs爬图片(二)
    前言    网上一张一张下载是不是很麻烦,直接批量下载,解决你的问题。高清不是梦!        具体步骤不说了,直接上代码constcheerio=require("cheerio");constaxios=require("axios");constfs=require("fs");constpath=require("path");letht......
  • nodejs做中间层_Nodejs 之 RPC 协议简介
    背景随着Nodejs的兴起,越来越多的Web服务中间层被搭建起来。如Node服务端渲染,BFF(BackendForFrontend))层,而RPC是远端过程调用,经常用于BFF层。最近,我打算写一个中间层,用Nodejs调用Go服务,除了可以简单用http调用之外,发现还有基于RPC的调用就研究了一下。RPC简......
  • websocket在线测试
    首先先在网页打开测试画面  http://www.jsons.cn/websocket/  然后根据系统进行连接按照格式进行连接连接参数用问好 记得跟token和需要的参数 中间用& 并且值用等号这个是连接上的画面根据系统 输入参数进行测试 输入参数和值 进行测试  ......
  • 使用React 18和WebSocket构建实时通信功能
    1.引言WebSocket是一种在Web应用中实现双向通信的协议。它允许服务器主动向客户端推送数据,而不需要客户端发起请求。在现代的实时应用中,WebSocket经常用于实时数据传输、聊天功能、实时通知和多人协作等场景。在本篇博客中,我们将探索如何在React18应用中使用WebSocket来......
  • NodeJS 高校学业预警系统 毕业设计-10551
    摘 要随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,教育行业当然也不能排除在外。高校学业预警系统是以实际运用为开发背景,运用软件工程开发方法,采用Node.JS技术构建的一个管理系统。整个开发过程首先对软件系......
  • CTF题型 nodejs(1) 命令执行绕过&典型例题
    CTF题型nodejs(1)命令执行绕过文章目录CTF题型nodejs(1)命令执行绕过一.nodejs中的命令执行二.nodejs中的命令绕过1.编码绕过2.拼接绕过3.模板字符串4.Obejct.keys5.反射6.过滤中括号的情况典型例题1.[GFCTF2021]ez_calc2.[西湖论剑2022]NodeMagicalLogin......
  • CTF题型 nodejs(2) Js沙盒vm&vm2逃逸原理总结&典型例题
    CTF题型nodejs(2)Js沙盒逃逸原理&典型例题文章目录CTF题型nodejs(2)Js沙盒逃逸原理&典型例题一.vm原理以及逃逸1.基本用法2.如何逃逸汇总1)this为对象2)this为null(Object.create(null))a.可用输出直接触发toString方法b.调用属性触发3)Object.create(null)+沙箱......
  • WebSocket学习
    WebSocket是什么?是一种协议,设计用于提供低延迟、全双工和长期运行的连接什么是全双工?通信的两个参与方可以同时发送和接收数据,不需要等待对方的响应或传输完成WebSocket的作用是?实现实时通信在WebSocket之前都用什么技术来模拟实现实时通信?轮询定期向服务器发送请求......