提醒：可以不要命名空间,socket.io客户端和服务器端版本要一致
官方案例：git clone https://github.com/socketio/chat-example.git (并没有提醒如何在纯html的情况下进行请求)
个人案例,转自：https://www.cnblogs.com/sanyekui/p/12822536.html
转载的案例
页面中引入 socket.io
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.5/socket.io.js"></script>
建立socket连接：
var socket = io.connect('https://xxxxxx', {transports: ['websocket']});
使用 emit() 客户端向服务端发送消息
socket.emit('connect',{ msg: 'Hello World' });// 参数一：发送消息的socket名，参数二: 发送的数据
使用 on() 接受服务端传来的消息
socket.on('connect',(res)=>{ // 参数一：接受消息的socket名，参数二：返回的信息 function
console.log(res)
});
使用 disconnect() 客户端主动与服务端断开连接
socket.disconnect(); // 断开 socket 连接
官方案例以及实现与http同一端口(命名空间可以去掉)
官方案例的同http同一端口实例
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// 带命名空间(不同命名空间消息不通)
// io.of("/c").on('connection', (socket) => {
// 不带命名空间
io.on('connection', (socket) => {
socket.on('chat message', msg => {
console.log(msg);
io.emit('chat message', msg);
});
});
http.listen(port, () => {
console.log(`Socket.IO server running at http://localhost:${port}/`);
});
客户端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- <script src="socket.client.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.5/socket.io.js"></script> <script> // 带命名空间 不同命名空间消息不互通 // var socket = io.connect('ws://127.0.0.1:3000/c', { transports: ['websocket'] }); // 不带命名空间 var socket = io.connect('ws://127.0.0.1:3000', { transports: ['websocket'] }); socket.on('connect', function () { console.log("连接成功"); }); socket.on('chat message', (res) => { // 参数一：接受消息的socket名，参数二：返回的信息 function console.log(res) }); // socket.emit('connect',{ msg: 'Hello World' }); </script> </body> </html>