socket.io

最新推荐文章于 2025-03-17 18:35:34 发布
转载 最新推荐文章于 2025-03-17 18:35:34 发布 · 273 阅读 · 0

 index.js

socket: a socket declared  in client, and it's listening to client event

io: this is the server

 

(msg from index.html to index.js, and then to index.js)

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3000;

server.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
    console.log('user connected');
    socket.on('message', (msg) => {
        console.log(`message from client (html file): ${msg}`);
        io.emit('message', `Re-emitted ${msg} from server`);
    })
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chatter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <style>
      form { padding: 20px; position: fixed; bottom: 0; width: 100%; padding-right: 50px;}
      #messages { list-style-type: none; margin: 0; padding: 0; width: 100%;}
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee;} 
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <ul id="messages"></ul>
      </div>
      <div class="row">
          <div class="col-lg-6">
            <form action="">
              <div class="input-group">
                  <input id="m" autocomplete="off" type="text" class="form-control" placeholder="Message..." aria-label="Message...">
                  <span class="input-group-btn">
                    <button class="btn btn-secondary" type="submit">Send</button>
                  </span>
                </div>
            </form>
          </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      $('form').submit(() => {
        socket.emit('message', $('#m').val());
        $('#m').val('');
        return false;
      });

      socket.on('message', (msg) => {
        $('#messages').append($('<li>').text(msg));
      })
    </script>
  </body>
</html>

 

socket connect and disconnect

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3000;

server.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
    console.log('user connected');
    socket.on('message', (msg) => {
        console.log(`message: ${msg}`);
        io.emit('message', msg);
    });

    socket.on('disconnect', () => {
        console.log('user disconnected');

        io.emit('message', 'user disconnected');
    })
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chatter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <style>
      form { padding: 20px; position: fixed; bottom: 0; width: 100%; padding-right: 50px;}
      #messages { list-style-type: none; margin: 0; padding: 0; width: 100%;}
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee;} 
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <ul id="messages"></ul>
      </div>
      <div class="row">
          <div class="col-lg-6">
            <form action="">
              <div class="input-group">
                  <input id="m" autocomplete="off" type="text" class="form-control" placeholder="Message..." aria-label="Message...">
                  <span class="input-group-btn">
                    <button class="btn btn-secondary" type="submit">Send</button>
                  </span>
                </div>
            </form>
          </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      $('form').submit(() => {
        socket.emit('message', $('#m').val());
        $('#m').val('');
        return false;
      });

      socket.on('connect', () => {
        // emiting to everybody
        socket.emit('message', 'user connected');
      })

      socket.on('message', (msg) => {
        $('#messages').append($('<li>').text(msg));
      })
    </script>
  </body>
</html>

 

namespace

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3000;

server.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

// tech namespace
const tech = io.of('/tech');

tech.on('connection', (socket) => {
    console.log('user connected');
    socket.on('message', (msg) => {
        console.log(`message: ${msg}`);
        tech.emit('message', msg);
    });

    socket.on('disconnect', () => {
        console.log('user disconnected');

        tech.emit('message', 'user disconnected');
    })
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chatter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <style>
      form { padding: 20px; position: fixed; bottom: 0; width: 100%; padding-right: 50px;}
      #messages { list-style-type: none; margin: 0; padding: 0; width: 100%;}
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee;} 
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <ul id="messages"></ul>
      </div>
      <div class="row">
          <div class="col-lg-6">
            <form action="">
              <div class="input-group">
                  <input id="m" autocomplete="off" type="text" class="form-control" placeholder="Message..." aria-label="Message...">
                  <span class="input-group-btn">
                    <button class="btn btn-secondary" type="submit">Send</button>
                  </span>
                </div>
            </form>
          </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io('/tech');
      $('form').submit(() => {
        socket.emit('message', $('#m').val());
        $('#m').val('');
        return false;
      });

      socket.on('connect', () => {
        // emiting to everybody
        socket.emit('message', 'user connected');
      })

      socket.on('message', (msg) => {
        $('#messages').append($('<li>').text(msg));
      })
    </script>
  </body>
</html>

 

chat room

index.js

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3000;

server.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

// tech namespace
const tech = io.of('/tech');

tech.on('connection', (socket) => {
    socket.on('join', (data) => {
        socket.join(data.room);
        tech.in(data.room).emit('message', `New user joined ${data.room} room!`);
    })

    socket.on('message', (data) => {
        console.log(`message: ${data.msg}`);
        tech.in(data.room).emit('message', data.msg);
    });

    socket.on('disconnect', () => {
        console.log('user disconnected');

        tech.emit('message', 'user disconnected');
    })
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chatter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <style>
      form { padding: 20px; position: fixed; bottom: 0; width: 100%; padding-right: 50px;}
      #messages { list-style-type: none; margin: 0; padding: 0; width: 100%;}
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee;} 
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <ul id="messages"></ul>
      </div>
      <div class="row">
          <div class="col-lg-6">
            <form action="">
              <div class="input-group">
                  <input id="m" autocomplete="off" type="text" class="form-control" placeholder="Message..." aria-label="Message...">
                  <span class="input-group-btn">
                    <button class="btn btn-secondary" type="submit">Send</button>
                  </span>
                </div>
            </form>
          </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const room = 'javascript';
      const socket = io('/tech');
      $('form').submit(() => {
        let msg = $('#m').val();
        socket.emit('message', { msg, room });
        $('#m').val('');
        return false;
      });

      socket.on('connect', () => {
        // emiting to everybody
        socket.emit('join', { room: room });
      })

      socket.on('message', (msg) => {
        $('#messages').append($('<li>').text(msg));
      })
    </script>
  </body>
</html>

 

debug

{
  "name": "chatter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon ./index.js --exec babel-node -e js",
    "test": "DEBUG=* nodemon ./index.js --exec babel-node -e js"
  },
  "author": "Emmanuel Henri",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "nodemon": "^1.12.1",
    "socket.io": "^2.0.3"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-0": "^6.24.1"
  }
}

npm run test

 

 

https://socket.io/docs/emit-cheatsheet/

https://socket.io/docs/server-api/

https://socket.io/docs/client-api/

 

socket.io的使用
weixin_44050919的博客
01-23 1612
node socket.io、前端 socket.io
猿创征文｜vue中SocketIO的正确使用方法，并且解决跨域问题
wangxiaosheng11的博客
09-01 4653
vue中SocketIO的正确使用方法，并且解决跨域问题
使用 socket.io 跨域问题的解决（整理了四种方法，总有成功的！） Access to XMLHttpRequest at ‘http://localhost:4000/socket.io
17902的博客
07-28 1万+
最近做项目，前台是react，后台是express+nodejs，用到 socket.io 做聊天功能。 报错：问题大意指跨域了 客户端代码： import io from 'socket.io-client' // 连接服务器, 得到与服务器的连接对象 const socket = io('ws://localhost:4000') 服务器端代码： module.exports = function (server) { const io = require('socket.io')(se.
用Socket.io在（vue3+ts）项目中实现聊天功能
qq_52683382的博客
08-15 2098
Socket.io 实现聊天功能
基于 socket.io 快速实现一个实时通讯应用
weixin_34362790的博客
04-22 566
随着web技术的发展，使用场景和需求也越来越复杂，客户端不再满足于简单的请求得到状态的需求。实时通讯越来越多应用于各个领域。 HTTP是最常用的客户端与服务端的通信技术，但是HTTP通信只能由客户端发起，无法及时获取服务端的数据改变。只能依靠定期轮询来获取最新的状态。时效性无法保证，同时更多的请求也会增加服务器的负担。 WebSocket技术应运而生。 WebSocket概念 不同于HTTP半双工...
socket.io 原理详解
CSDN前端知识共享
01-27 1万+
socket.io 原理详解 在上一篇文章中，我们了解到 socket.io 是 基于engine.io 进行封装的库。 所以对engine.io不清楚的童鞋可以点击进行了解: engine.io 详解 1.概述 socket.io 是基于 Websocket 的Client-Server 实时通信库。 socket.io 底层使用engine.io 封装了一层协议。 两者的依赖关系可参考:...
网络IO以及socket编程
2403_85810926的博客
12-03 2092
再回头来看socket技术，我们大概知道了socket是基于TCP/IP上的通信技术，可是它到底位于网络模型的哪个位置（或哪一层）？可靠传输的目的是我们要尽可能地让接收方接收到发送方发送的数据，因此我们需要向发送方回复确认信息，或者说接收方进行检查。关于流式传输，举一个例子，发送方发送“hello”，数据回像水流一样传输过去，即h,e,l,l,o会依次发送到接收方。：当一个IO操作（如read或write）被调用时，如果操作不能立即完成，调用线程将被阻塞，直到操作完成。当IO操作完成时，程序会收到通知。
android io socket on,socket.io Android 使用
weixin_42382944的博客
05-27 674
话不多说,直接上代码首先在项目build.gradle中添加以下代码compile('io.socket:socket.io-client:0.8.3') {// excluding org.json which is provided by Androidexclude group: 'org.json', module: 'json'}第一步,在Application 中配置全局socketp...
websocket/vue-socket.io/socket.io-client相关认识理解
wzp20092009的博客
09-15 3387
前言 因为项目需要在vue用到websocket所以找了很多帖子与资料，但是原生的需要封装逻辑比较复杂，对于仅仅是使用学习成本比较大，第三方插件的话我找的有vue-socket.io、socket.io、socket.io-client，其中vue-socket.io与socket.io我使用时都遇到个问题，就是全局组件挂载后没有找到io实例，找到了io实例与相关方法但是却无法使用，例如on方法，使用时无任何报错，但是控制台没打印后台传输的数据，而最后找到了socket.io-client直接挂载io实例使
什么是Socket.IO？如何调试Socket.IO接口
weixin_45017726的博客
03-12 892
Socket.IO为我们提供了构建实时应用的强大基础，而Apifox则让 Socket.IO 接口的调试变得简单直观。通过结合使用这两个工具，我们可以更高效地开发出稳定、可靠的实时通信应用。无论是聊天软件、协作工具还是实时监控系统，掌握 Socket.IO 和 Apifox 的使用方法，都将大大提升开发效率和产品质量。
什么是socket.Io
lidan724的博客
03-31 1510
什么是socket.Io? SocketIO是在客户端和服务端之间建立的双向通信数据交换技术，底层使用EngineIO。SocketIO的的客户端使用Engine.IO-Client，服务端使用Engine.IO实现。 Socket.Io如何工作 当一个浏览器尝试建立SocketIO时，SocketIO首先使用xhr-polling创建一个长轮询。长轮询一旦建立，它将升级为WebSocket连接。...
Socket.io 与 WebSocket
sorrowkaka的博客
09-25 1861
背景 工作上需要做一个实时投票系统，因此想到利用 websocket 做数据推送，而后台采用 nodejs 因为需要快速搭建完成该项工作，最终查找到 socket.io 这个 node 库。 而我开发工作一直集中在后台身份验证和前端页面的图表展示，对于 socket.io 本身没有太过关注内部实现，唯一一次关注是在 ios 4.x 系统接收不到 socket.io 的推送是查了一下，后发现 ios...
Socket 、WebSocket、Socket.IO详细对比
最新发布
chaixinke的专栏
03-17 1540
Socket是一个通用的网络编程接口，用于在网络上实现进程间通信（IPC）。它是操作系统提供的底层 API，支持 TCP、UDP 等协议。Socket 是网络通信的基础，几乎所有网络通信技术（包括 WebSocket）都是基于 Socket 实现的。WebSocket是一种基于 TCP 的应用层协议，提供了全双工通信能力。它是 HTTP 协议的升级版，允许客户端和服务器在建立连接后持续通信。WebSocket 是 HTML5 标准的一部分，主要用于浏览器与服务器之间的实时通信。Socket.IO。
Socket.IO 技术简介以及使用socket.io工具连接测试
weixin_45017726的博客
03-14 1176
Socket.IO为我们提供了构建实时应用的强大基础，而Apifox则让 Socket.IO 接口的调试变得简单直观。通过结合使用这两个工具，我们可以更高效地开发出稳定、可靠的实时通信应用。无论是聊天软件、协作工具还是实时监控系统，掌握 Socket.IO 和 Apifox 的使用方法，都将大大提升开发效率和产品质量。
mqtt和socket.io实现socket互通
sifeimeng的专栏
04-02 2363
var express = require('express') , routes = require('./routes') , http = require('http') , path = require('path') , socketio = require('socket.io') , mqtt = require('mqtt');   ...
socket.io 是什么？主要特点以及怎么测试socket.io接口
weixin_45017726的博客
03-12 700
Socket.IO为我们提供了构建实时应用的强大基础，而Apifox则让 Socket.IO 接口的调试变得简单直观。通过结合使用这两个工具，我们可以更高效地开发出稳定、可靠的实时通信应用。无论是聊天软件、协作工具还是实时监控系统，掌握 Socket.IO 和 Apifox 的使用方法，都将大大提升开发效率和产品质量。
Socket.io部署遇到的坑
热门推荐
Edirc.Li's Blog
06-09 6万+
问题： 服务端使用了namespace来隔离作用域，也没增加其它配置 一开始使用ip+端口的方式与服务端连接，一切正常，后来采用nginx部署的方式，就凉凉了。 错误信息 Socket.io connection error: Invalid namespace. 排查过程 首先检查nginx的配置文件，确保支持socket连接 详:https://www.nginx.com/blog/nginx-nodejs-websockets-socketio/ 配置都没问题后，还是无法正常运转，无奈之下只能去
研究一下Socket和IO模型
心有猛虎 细嗅蔷薇
11-10 1209
目录 Socket Socket通信流程 Socket IO模型 IO IO交互过程 IO模型 一、阻塞IO模型 二、非阻塞IO模型 三、IO复用模型 四、信号驱动式IO模型 五、异步IO模型 五大IO模型的比较 关于Socket和WebSocket的区别 Socket 和IP可以标识一台计算机一样，进程在网络里面通信也是需要被唯一标识，那么如果是在一台计算机里，PI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值