具體源碼:Socket
目錄結構
D:.
│ package.json
│ server.js
│
└─public
index.html
socket.io.js
需要的條件
- socket.io.js 供前端界面初始化io
- socket.io 供NodeJs端提供socket方法
socket.io.js存在於socket.io-client
socket.io存在於socket.io
演示的功能
-
客戶端發送消息給服務端
-
后端觸發事件告知客戶端
-
客戶端離開觸發服務端事件
服務端
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
app.use('/', express.static(__dirname + '/public'));
server.listen(80);
//socket部分
io.on('connection', function(socket) {
//接收並處理客戶端的hi事件
socket.on('hi', function(data) {
console.log(data);
//觸發客戶端事件c_hi
socket.emit('c_hi','hello too!')
})
//斷開事件
socket.on('disconnect', function(data) {
console.log('斷開',data)
socket.emit('c_leave','離開');
//socket.broadcast用於向整個網絡廣播(除自己之外)
//socket.broadcast.emit('c_leave','某某人離開了')
})
});
- connection用來處理socket鏈接事件
- disconnect處理連接斷開事件
- 后端接受前端事件通過
socket.on(EventName,function(date){}) - 后端觸發前端事件通過
socket.emit(EventName,msg)
這個后端演示了,前端發送消息給后端，觸發hi事件，hi事件通過回調在觸發客戶端定義的c_hi事件告知前端。
客戶端
index.html
<!DOCTYPE html>
<html>
<head>
<title>socket</title>
</head>
<body>
<button id="sendBtn">發送消息</button>
<button id="leaveBtn">離開</button>
</body>
<script type="text/javascript" src="./socket.io.js"></script>
<script type="text/javascript">
var socket=io.connect('localhost:80'),//與服務器進行連接
send=document.getElementById('sendBtn'),
leave=document.getElementById('leaveBtn');
send.onclick=function(){
socket.emit('hi', 'hello!');
}
leave.onclick=function(){
window.location.href="about:blank";
window.close()
socket.emit('leave', 'leave');
}
//接收來自服務端的信息事件c_hi
socket.on('c_hi',function(msg){
alert(msg)
})
// socket.on('c_leave',function(msg){
// alert(msg)
// })
</script>
</html>
- 發送消息按鈕用來給服務端發送信息，觸發服務端定義的hi事件。
- 離開頁面按鈕用來離開頁面，也就是socket會自動斷開。觸發服務端定義的disconnect。