socket.io 消息不是广播机制

背景

以为websocket server 的信息是广播给所有的websocket client 的,但是后续发现当一个client 发起一个操作,然后emit 一个message, 这个时间在所有client 端都有监听,但是只有发起的client 端才能接受到这个emitted msg, 而不是我之前想的,所有监听这个时间的client 都能收到。

环境

frontend项目中安装了socket.io-client

javascript 复制代码
import { Socket, io } from 'socket.io-client';
private socketUrl = 'ws://localhost:3000';
private currentSocket = io(this.socketUrl);

ngOnInit() {
    this.currentSocket.on('news', (result) => {
      console.log(`latest news`, result.data);
    });
  }

backend server 中安装了socket.io, 提供websocket 连接。

javascript 复制代码
import { createServer } from 'http';
import { Server } from 'socket.io';

const socketMessageIds = {
  on: {
    getNews: 'getNews',
    addNew: 'addNew',
  },
  emit: {
    news: 'news'
  }
};

function getSuccessResponse(message, data = null) {
  return {
    code: 2000,
    data,
    msg: String(message || '')
  };
}
function getErrorResponse(message, code = -1) {
  return {
    code,
    data: null,
    msg: String(message || '')
  };
}

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: '*'
  }
});
httpServer.listen(3000);

const news = [];

io.on('connection', (socket) => {

  socket.on(socketMessageIds.on.getNews, () => {
    socket.emit(
      socketMessageIds.emit.news,
      getSuccessResponse('send msg successfully~', news)
    );
  });
  
  socket.on(socketMessageIds.on.addNew, (arg: string) => {
    news.push(arg);
    socket.emit(
      socketMessageIds.emit.news,
      getSuccessResponse('send msg successfully~', news)
    );
  });

}
});

另外启动了一个socket.io-client 进程

javascript 复制代码
import { io  } from 'socket.io-client';

const socket = io('ws://localhost:3000');

socket.on('disconnected', () => {
  console.log('disconnected with server');
})

socket.on('connect', () => {

  socket.emit('addNew', 'dongyuhui is the new VP of dongfang zhenxuan' , (res) => {
    console.log(`latest news`, res.data);
  });

  socket.on('news', (res) => {
    console.log('latest news: ', res.data);
	});
});
相关推荐
暮之沧蓝几秒前
React(18-19)总结
前端·react.js·前端框架
HIT_Weston5 分钟前
50、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 单/多线程分析(二)
前端·ubuntu·gitlab
我太想进步了C~~5 分钟前
Prompt Design(提示词工程)入门级了解
前端·人工智能·算法
crary,记忆5 分钟前
如何理解 React的UI渲染
前端·react.js·ui·前端框架
苏打水com7 分钟前
Day1-3 夯实基础:HTML 语义化 + CSS 布局实战(对标职场 “页面结构搭建” 核心需求)
前端·css·html·js
m0_740043739 分钟前
mapState —— Vuex 语法糖
java·前端·javascript·vue.js
哟哟耶耶10 分钟前
WebPage-postcss-px-to-viewport前端适配
前端·javascript·postcss
7澄110 分钟前
Java Web 底层解析:Servlet 执行流程、Tomcat 工作原理与自定义 Tomcat 实现
java·前端·servlet·tomcat·自定义tomcat·tomcat执行流程·servlet执行流程
拾忆,想起13 分钟前
Dubbo延迟加载全解:从延迟暴露到延迟连接的深度优化
前端·微服务·架构·dubbo·safari
IT_陈寒15 分钟前
React 18并发渲染实战:这5个性能陷阱让我浪费了整整一周!
前端·人工智能·后端