後端自學之路《實踐》第一篇：搭建socketIO 服務 總共四種方式

參考資料：https://www.npmjs.com/package/socket.io

第一種方式： 基於http

const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', client => {
  client.on('event', data => { /* … */ });
  client.on('disconnect', () => { /* … */ });
});
server.listen(3000);


第二種方式：獨立的
const io = require('socket.io')();
io.on('connection', client => { ... });
io.listen(3000);

第三種方式：基於 express 

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

第四種方式：基於 koa

const app = require('koa')();
const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

////////////////////////////////////////////////////////////////////////////

公共的API：

io.on('connection', socket => {
  socket.emit('request', /* … */); // emit an event to the socket
  io.emit('broadcast', /* … */); // emit an event to all connected sockets
  socket.on('reply', () => { /* … */ }); // listen to the event
});

note:

io.emit 是廣播消息 （即所有用戶）

socket.emit 是發送給當前用戶

const http = require('http');
const ws = require('socket.io');
/**********************************************************/
//第一種搭建方式： 基於http
// const server = http.createServer(function (req,res){});
// const io = ws(server);
// io.on('connection',socket=>{
//     debugger
//     console.log('當前有用戶連接 socket connection ');

//     socket.on('event',data=>{
//         console.log('event',data);
//     });
//     socket.on('disconnect',()=>{
//         console.log('disconnect')
//     });
//     //接收客戶端所發送的消息
//     socket.on('message',(mes)=>{
//         console.log('客戶端發送來的消息 message： ',mes);
//         io.emit("message",mes);
//     })
// });
// server.listen(3000);
/************************************************ */
//第二種連接方式： 獨立的socektIO
// const io = ws();
// io.on('connection',socket=>{
//     debugger
//     console.log('當前有用戶連接 socket connection ');

//     socket.on('event',data=>{
//         console.log('event',data);
//     });
//     socket.on('disconnect',()=>{
//         console.log('disconnect')
//     });
//     //接收客戶端所發送的消息
//     socket.on('message',(mes)=>{
//         console.log('客戶端發送來的消息 message： ',mes);
//         io.emit("message",mes);
//     })
// });
// io.listen(3000);

/************************************************ */
//第三種方式：基於 express 
// const app = require('express')();
// const server = http.createServer(app);
// const io = ws(server);
// io.on('connection',socket=>{
//     debugger
//     console.log('當前有用戶連接 socket connection ');

//     socket.on('event',data=>{
//         console.log('event',data);
//     });
//     socket.on('disconnect',()=>{
//         console.log('disconnect')
//     });
//     //接收客戶端所發送的消息
//     socket.on('message',(mes)=>{
//         console.log('客戶端發送來的消息 message： ',mes);
//         io.emit("message",mes);
//     })
// });
// server.listen(3000);

/************************************************ */
//第四種方式：基於 express 
const app = require('koa');
const NewApp = new app();
const server = http.createServer(NewApp.callback());
const io = ws(server);
io.on('connection',socket=>{
    debugger
    console.log('當前有用戶連接 socket connection ');

    socket.on('event',data=>{
        console.log('event',data);
    });
    socket.on('disconnect',()=>{
        console.log('disconnect')
    });
    //接收客戶端所發送的消息
    socket.on('message',(mes)=>{
        console.log('客戶端發送來的消息 message： ',mes);
        io.emit("message",mes);
    });

    socket.on("btnEvent",(mes)=>{
        console.log("btnEvent",mes);
        io.emit("resBtnEvent",mes);
        socket.emit("message",mes);

    })
});
server.listen(3000);