Socket.IO使用方法

前言

Socket.IO是一个库，基于 Node.js 的实时应用程序框架。可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它适用于每个平台、浏览器或设备，同样注重可靠性和速度。它包括：

Node.js 服务器
浏览器的Javascript客户端库（也可以从Node.js运行）

WebSocket 的产生源于 Web 开发中日益增长的实时通信需求，对比基于 http 的轮询方式，它大大节省了网络带宽，同时也降低了服务器的性能消耗。

WebSocket 协议在2008年诞生，2011年成为国际标准。虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，就诞生SocketIO。

SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。
SocketIO使用手册https://socket.io/docs/v4/handling-cors/

一、安装Socket.IO

npm init -y
npm install socket.io

二、使用场景

两个客户端互相通信

2.1、模拟服务端

const { createServer } = require("http");
const { Server } = require("socket.io");const httpServer = createServer();
const io = new Server(httpServer, {  cors: {                 //解决跨域问题origin: "*",methods: ["GET", "POST"]}
});io.on("connection", (socket) => {// 自定义接收消息事件socket.on('sendMsg',(data) => {console.log(data)//   定义发送消息事件// io表示广播出去，发送给全部的连接io.emit('pushMsg',"服务端返回的消息："+data)})
});httpServer.listen(3000,function(){console.log('http://127.0.0.1:3000')
});

2.1、模拟客户端

<!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><!-- socketio提供的客户端 --><script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj"crossorigin="anonymous"></script>
</head>
<body><input type="text" id="text"><input type="button" value="发送" onclick="send()"><script>// 直接建立连接var socket = io.connect('http://127.0.0.1:3000')function send(){var text = document.getElementById('text').value//   发送消息socket.emit('sendMsg',text)}//   接收服务端的消息socket.on('pushMsg',(data) => {console.log(data)})</script>
</body>
</html>

2.3、测试

Socket.IO使用方法相关推荐

Socket.io:有点意思
个人网站欢迎品尝 edwardesire.com 下面页面就是使用Socket.io制作的口袋妖怪游戏(默认小屏下已隐藏,请切换到大分辨率查看).左边是游戏画面,右边是按键表和聊天室.画面达到红蓝版 ...
phaser.min.js_如何使用Phaser 3，Express和Socket.IO构建多人纸牌游戏
phaser.min.js I'm a tabletop game developer, and am continually looking for ways to digitize game ex ...
node mongoose_如何使用Express，Mongoose和Socket.io在Node.js中构建实时聊天应用程序
node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...
socket io与vue-cli的结合使用
关于在vue中使用websocket的简易例子使用vue-cli生成一个vue模版安装三个依赖: npm install -s socket.io npm install -s vue-socke ...
socket.io实现在线群聊
我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始先安装socket.io: npm install socket.io 利用Node的搭 ...
koa+mysql+vue+socket.io全栈开发之web api篇
原文地址:koa+mysql+vue+socket.io全栈开发之web api篇目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd ...
socket.io的基本使用
服务端: 1.监听客户端连接: io.on("connection",socket=>{ }); 不分组数据传输:传输对象为当前socket 2.1给该socket所有客户端 ...
websocket与socket.io
什么是Websocket? Websocket是一个独立于http的实时通信协议,最初是在HTML5中被引用进来的,在HTML5规范中作为浏览器与服务器的核心通信技术被嵌入到浏览器中.WebSocke ...
突袭HTML5之WebSocket入门3 - 通信模型socket.io
为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程 ...