前言

socket.io是原生ws封装的第三方库，它不仅仅对客户端做了封装，还对服务端也进行了封装。

提供了很多能用得到的功能，比如：

断链自动尝试重链

对不支持ws的浏览器做兼容（降级轮循http）

发送和监听消息的封装（原生的，无论前后端写起来都比较冗长）

服务端

socket.io当然不会仅支持node，但是官方推荐node体验比较好

import { createServer } from "http";

import { Server } from "socket.io";

const httpServer = createServer(); // socket.io的服务需要http服务做支撑

const io = new Server(httpServer, { // 初始化ws

    cors: { //处理ws跨域问题

        origin: "*",

        methods: ["GET", "POST"]

    }

});

io.on("connection", (socket) => { // 监听ws链接成功

    console.log('与客户端链接成功');

    socket.on("yanhan", (data) => { // 监听ws的yanhan消息

        console.log('收到了阎涵的消息：'+ data);

    });

    setInterval(() => { // 定时给Yh发送当前时间

        socket.emit("toYh", "你好啊，现在已经"+new Date().toLocaleString());

    }, 3000);

});

httpServer.listen(3000); // 启动http服务

客户端

这里拿浏览器举例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button>阎涵给服务器发消息</button>

</body>

<script src="./lib/socket.io.js"></script>

<script>

    // 三方插件socket.io的写法

    const socket = io("ws://localhost:3000"); //初始化ws

    document.querySelector('button').onclick = ()=>{

        socket.emit("yanhan", '我是女大佬');//发送消息

    }

    socket.on("toYh", (...args) => { //接收消息

        console.log('我接收到了toYh事件：', args);

    });

</script>

</html>

原生的写法（服务端）

参考：

https://blog.csdn.net/m0_37911706/article/details/128057137

https://github.com/websockets/ws

import WebSocket, { WebSocketServer } from 'ws';

//创建一个WebSocket服务器，在3000端口启动

const server = new WebSocketServer({ port: 3000 });

//只要有WebSocket连接到该服务器，就会触发'connection'事件

server.on("connection", (ws, req) => {

  const ip = req.socket.remoteAddress;

  const port = req.socket.remotePort;

  const clientName = ip + port;

  console.log(`客户端-${clientName}： 已连接`);

  /* 发送数据：ws通过send()方法来发送数据*/

  ws.send(`欢迎 客户端-${clientName}的加入`);

  // 接收数据：ws通过message事件来接收数据。当客户端有消息发送给服务器时，服务器就能够触发该消息

  ws.on("message", (message) => {

    console.log(`收到消息：`+ message);

  });

});

socket.io的小例子的更多相关文章

  1. node与socket.io搭配小例子-转载

    //服务端代码 io = require('socket.io').listen(app), fs = require('fs'), cookie=require('cookie'); request ...

  2. 一个基于tcp的socket简单对话小例子

    首先我们需要写连个py文件,一个server,一个client. import socket sk = socket.socket() # sk.bind(('ip',port)) sk.bind(( ...

  3. 微信小游戏下socket.io的使用

    参考: 微信小游戏:socket.io 一 在微信小游戏 中使用socket.io报错 因为项目需求,后端要使用nodejs简单搭建一个服务器,通讯用json格式. 使用Egret提供的socket. ...

  4. 前端笔记之微信小程序（四）WebSocket&Socket.io&摇一摇案例&地图|地理位置

    一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯 ...

  5. 用socket.io实现websocket的一个简单例子

    socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...

  6. NodeJS+Express+Socket.io的一个简单例子

    关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...

  7. 如何使用koa实现socket.io官网的例子

    socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下 ### 框架准备 确保你本地已经安装好了nodejs和npm,使用koa要求node版本> ...

  8. 详解如何使用koa实现socket.io官网的例子

    socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下利用 socket.io 实现消息实时推送 框架准备 1.确保你本地已经安装好了nodejs和np ...

  9. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  10. Socket.io:有点意思

    个人网站 欢迎品尝 edwardesire.com 下面页面就是使用Socket.io制作的口袋妖怪游戏(默认小屏下已隐藏,请切换到大分辨率查看).左边是游戏画面,右边是按键表和聊天室.画面达到红蓝版 ...

随机推荐

  1. BeanCreationException: Error creating bean with name 'dataSource' defined in class path resource

    在练习中遇到的,我的情况是: 打算在common中建立student实体类,想到可能其他模块也会用到这个类,但是一些注解比如,@TableId等等需要用到mybatis-plus的依赖,所以我就把依赖 ...

  2. luat编程MQTT的自动重连失败分析

    正确用法 查看代码 --- 模块功能:MQTT客户端处理框架 -- @author openLuat -- @module mqtt.mqttTask -- @license MIT -- @copy ...

  3. Greenplum数据库索引解析

    以下是对greenplum数据库使用总结. 创建索引 CREATE INDEX i_test_tb_state_az ON test_tb(name_en) WHERE name_en = 'AZ'; ...

  4. Python 潮流周刊第3季总结，附电子书下载

    我订阅了很多的周刊/Newsletter,但是发现它们都有一个共同的毛病:就是缺乏对往期内容的整理,它们很少会对内容数据作统计分析,更没有将内容整理成合集的习惯. 在自己开始连载周刊后,我就想别开生面 ...

  5. [笔记]通过命令行连接MySQL数据库服务器的几种方式总结如下

    通过命令行连接MySQL数据库服务器的几种方式总结如下: 1.连接本地数据库,用户名为"root",密码"123456"(注意:"-p"和& ...

  6. 37.1K star！MCP爆火后，这个AI模型全能工具箱开源项目让智能体开发更简单！

    嗨,大家好,我是小华同学,关注我们获得"最新.最全.最优质"开源项目和高效工作学习方法 "Awesome MCP Servers 是当前最全面的模型上下文协议服务器集合, ...

  7. W.js ，一个超级小的三维 WebGL 引擎的使用方法

    目录 前言 它的特点 API 入门使用 内置模型 导入自己的模型 动画 自定义投影矩阵 摄像机与主角绑定 解除绑定 前言 我们知道,在网页上搞三维,three.js 和 babylon.js 都是成熟 ...

  8. 操作系统：Linux如何实现系统API

    上节课,我们通过实现一个获取时间的系统服务,学习了 Cosmos 里如何建立一个系统服务接口.Cosmos 为应用程序提供服务的过程大致是这样的:应用程序先设置服务参数,然后通过 int 指令进入内核 ...

  9. 如何排查内存飙高-Linux top命令快速入门

      Linux系统出现了性能问题,一般我们可以通过 top.iostat.free.vmstat和ifstat等命令来初步定位问题.其中,top命令是Linux下常用的性能分析工具,用于实时监测系统资 ...

  10. Qt 图片轮播

    最近研究了一下图片轮播,主要是用到了QPropertyAnimation这个类,具体代码示例如下: main.cpp #include <QApplication> #include &q ...