PJCHENder 未整理筆記

[NPM] socket.io 使用筆記

2017-10-03

[NPM] socket.io 使用筆記

Socket.IO 包含兩個部分:

  • 和 Node.JS 整合的 HTTP Server:socket.io
  • 於瀏覽器端載入的函式庫:socket.io-client

Socket.IO 背後最主要的概念就是你可以傳送和接受任何你想要的事件,並帶著你想要的 data,而且支援 JSON 和 binary data。

Server

1
2
3
const app = require('express')()
const http = require('http').Server(app)
const io = require('socket.io')(http)

每個 io 都有 connectdisconnect event:

1
2
3
4
5
6
7
8
9
10
/**
* "connection" and "disconnect" event
**/
io.on('connection', function (socket) {
console.log('a user connected')

socket.on('disconnect', function () {
console.log('user disconnected')
})
})

如果要推播給所有使用者,可以使用 io.emit('EVENT', DATA)

1
2
3
4
5
6
7
8
9
/**
* Use 'io.emit()' to send an event to everyone
**/

io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg)
})
})

如果要推播給所有人,但除了特定的 socket 的話,可以使用 socket.broadcast.emit()

1
2
3
4
5
6
/**
* Use socket.broadcast.emit() to send an event to everyone except certain socket
**/
io.on('connection', function(socket){
socket.broadcast.emit('hi');
});

client

當載入 socket.io.js 後,即可在全域環境取得 io
如果我們沒有在 io() 中去指定 URL,預設會試著去連到 response 此頁面的伺服器主機。

1
2
3
4
5
6
7
8
9
<!--
- 當我們在 server 的地方載入 socket.io 後,
- 即可在 /socket.io/socket.io.js 中載入 socket.io.js
-->

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>

使用 socket.emit() 可以將訊息推播到伺服器:

1
2
var socket = io();
socket.emit('EVENT', DATA);

使用 socket.on(EVENT, CALLBACK<data>) 可以監聽伺服器傳來的事件,並取得資料:

1
2
3
socket.on('chat message', function(msg){
// do something here
});

參考資料

未閱讀

掃描二維條碼,分享此文章