nodejs基于express搭建websocket

最新推荐文章于 2025-03-07 22:57:23 发布

一夜醒来头秃了

最新推荐文章于 2025-03-07 22:57:23 发布

阅读量2.8k

点赞数 4

分类专栏： node 文章标签： websocket react.js javascript

本文链接：https://blog.csdn.net/hs1219462412/article/details/123553317

版权

本文详细介绍了如何使用Node.js和WebSocket搭建实时通信服务，展示了A页面通过iframe与B页面进行双向消息传递的过程，适合前端与后端开发者学习实时应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、搭建websocket

搭建node项目并安装依赖：

npm install express -g
npm install express-generator -g
express myproject
npm install ws

在 app.js 中配置 ws：

var websocket = require('ws');
var server = new websocket.Server({
   
  port: 1234
});
server.on('open', () => {
   
  console.log('open');
});
server.on('close', () => {
   
  console.log('close');
});
server.on('connection', (ws, req) => {
   
  console.log('connection连接成功');
  ws.on('message', (data) => {
   
    // data: 接收信息
    server.clients.forEach((item) => {
   
      if (item.readyState === ws.OPEN) {
   
        // console.log('' + data);
        item.send('' + data);
      }
    });
  });
});

客户端连接：
A 页面通过iframe内嵌B页面测试通信
A页面：

import React, {
    useEffect, useRef, useState } from 'react';
import './index.scss';

export default function learn2() {
   
  useEffect(() => {
   
    const ws = new WebSocket('ws://localhost:1234');
    ws.onopen = () => {
   
      console.log('连接成功'