提醒：可以不要命名空間,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>