前言

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. Unity3D教程：次表面散射的简单实现

    次表面散射指的是光线射入半透明材质,在内部发生散射后再透射出来的光线传播过程,考虑到有些项目会需要使用次表面散射,下面就给大家介绍下在Unity3D中次表面散射的简单实现,希望可以帮到大家. 一.前言 ...

  2. 机器人操作系统ROS2之简介

    什么是ROS2? ROS(机器人操作系统)是用于机器人应用的开源软件开发工具包.ROS 为各行业的开发者提供了一个标准的软件平台,帮助他们从研究和原型设计一直推进到部署和生产,从驱动程序到最先进的算法 ...

  3. HarmonyOS运动开发：如何监听用户运动步数数据

    前言 在开发运动类应用时,准确地监听和记录用户的运动步数是一项关键功能.HarmonyOS 提供了强大的传感器框架,使得开发者能够轻松地获取设备的运动数据.本文将深入探讨如何在 HarmonyOS 应 ...

  4. 一个简单的struts2配置

    目录 1 需求 2 需要导入的jar包 3 项目的目录结构 3.1  demo1.jsp 3.2 success.jsp 3.3 HelloAction.java 3.4 struts.xml 3.5 ...

  5. Tableau 我常用函数整理

    日期函数 dateadd datedadd (date_part, interval, date) 表示在日期 date 的基础上, 以date_part 为单位, 与之间隔 interval的日期 ...

  6. 用 Tarjan 算法求解有向图的强连通分量

    图论中的连通性概念是许多算法与应用的基础.当我们研究网络结构.依赖关系或路径问题时,理解图中的连通性质至关重要.对于不同类型的图,连通性有着不同的表现形式和算法解决方案. 无向图与有向图的连通性 在无 ...

  7. C#数据结构及算法之链表

    C# 链表 链表是节点的列表,节点包含两部分:值和链接,其中值部分用于储存数据,链接部分用于指向下一个元素的地址,是引用 类型. 单链表 public class LinkedList { priva ...

  8. codebuddy模型基于Python的实时音视频直播系统开发：多线程采集、WebSocket传输与JWT安全认证实践

    我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 我现在需要帮用户解决一个Pyt ...

  9. Kafka怎么配置SASL用户名密码认证

    服务端配置(server.properties): # 开启SASL认证 security.protocol=SASL_PLAINTEXT sasl.mechanism=PLAIN # 配置JAAS文 ...

  10. XML注入

    XML注入 复现使用的题目为buuoj中的[NCTF2019]Fake XML cookbook 1和[NCTF2019]True XML cookbook 1 参考链接为https://xz.ali ...