安裝 Socket.io
- 官網：http://socket.io/
- 文檔：https://socket.io/docs/
- $
npm install socket.io
Socket.io對象的創建
寫原生的 JS，搭建一個服務器，server 創建好之後， 創建一個 io 對象
var http = require("http");
var server = http.createServer(function(req,res){
if(req.url == "/"){ //顯示首頁
fs.readFile("./index.html",function(err,data){
res.end(data);
});
}
});
var io = require('socket.io')(server);
//監聽連接事件
io.on("connection",function(socket){
console.log("1 個客戶端連接了");
})
server.listen(3000,"127.0.0.1");
你會發現，http://127.0.0.1:3000/socket.io/socket.io.js 就是一個 js 文件 的地址了, 然後現在需要製作一個index頁面，這個頁面中，必須引用js文件。調用io函數，取得socket 對象
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>我是 index 頁面</h1>
<button id="button">和服務器通信</button>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
</script>
</body>
</html>
至此，服務器和客戶端都有 socket 對象了
客戶端，服務器建立連接並通信
服務端
服務器端通過 emit 廣播，通過 on 接收廣播
var io=require('socket.io')(server);
// 監聽連接事件
io.on('connection',function(socket){
console.log('和服務器建立連接了');
// 接收客戶端發送的信息
socket.on('to-server',function(data){
console.log('客戶端說:'+data);
socket.emit('to-client','我是服務器返回的數據');
});
// 監聽斷開連接事件
socket.on('disconnect',function() {
console.log('斷開連接了');
})；
})
每一個連接上來的用戶，都有一個 socket。 由於我們的 emit 語句，是 socket.emit()發 出的，所以指的是向這個客戶端發出語句。廣播，就是給所有當前連接的用戶發送信息
客戶端
客戶端端通過 emit 廣播，通過 on 接收廣播
var socket = io.connect('http://localhost:3001');
socket.on('connect',function(){
console.log('客戶端和服務端建立連接了');
});
socket.on('disconnect',function(){
console.log('客戶端和服務端斷開連接了');
});
socket.on('to-client',function(data){
console.log('客戶端說:'+data);
});
var btn = document.getElementById('button');
btn.onclick = function(){
socket.emit('to-server','我是客戶端的數據');
}
socket.io的應用場景
- 即時通信：聊天室，比如QQ
- 直播彈幕的實現
- 移動App與服務器的數據同步
- 智能客服機器人
- 等等