• 搭建 socket 服务端环境

    搭建 socket 服务端环境

    初始⽬录结构说明

    ├── node_modules # 第三⽅包存储⽬录
├── index.js # node启动文件
├── index.html # 测试socket
├── yarn.json # 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 yarn 时⼤家的依赖能保证⼀致
└── package.json # 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容

    初始化项目

    新建一个文件夹

    mkdir scoket-chat-back
cd scoket-chat-back

    初始化

    使用 yarn 或者 npm 初始化项目

    yarn

    yarn init -y

    npm

    npm init -y

    安装依赖

    yarn add socket.io express

    socket 开发

    • index.js
    const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);
let rooms = {};

io.on('connection', (socket) => {
  console.log('a user connected');

  // 接收`send`事件传递过来的消息
  socket.on('send', (data) => {
    console.log(data);
    // 将内容发送到`receive`
    socket.emit('receive', data);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

    测试

    • index.html
    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Documenttitle>
  head>
  <body>body>
  <script type="module">
    import { io } from 'https://cdn.socket.io/4.4.1/socket.io.esm.min.js';

    const socket = io('http://localhost:3000', {
      transports: ['websocket'],
    });
    // 监听客户端连接,回调函数会传递本次连接的socket
    socket.on('connect', () => {
      console.log('#connect,', socket.id);
      // 发送消息
      socket.emit('send', 'hello word!');
      // 接收消息
      socket.on('receive', (data) => {
        console.log(data);
      });
    });
  script>
html>

    • 服务端
      在这里插入图片描述

      控制台输出a user connected和hello word! 则代表我们已经连接成功，并成功接收到消息

    • 客户端
      在这里插入图片描述

      控制台输出#connect, 89_-7lb-VzJtNDjXAAAH和hello word! 则代表我们已经连接成功，并成功接收到消息

  • 相关阅读:
    刷爆leetcode Day14 DFS
    SpringCloud - 流量控制(一)：基于RequestRateLimiterGatewayFilterFactory的限流
    密码相关----对称加密，非对称加密
    Navicat Premium 15 for Mac/Win 中文安装包下载
    DS5上ARM编译器样例工程改为GCC编译
    ptmalloc源码分析 - malloc/free函数的实战篇（12）
    顺序表＜数据结构 C 版＞
    效果类似于 distinct 的列值去重/统计 Excel中有unique函数 numbers表格中无
    uni-app：引用文件的方法
    赛码系统——根据文件生成时间先后顺序对文件进行排序
  • 原文地址：https://blog.csdn.net/qq_32090185/article/details/127110328