websocket之socket.io前後端聯調詳解（nodejs方向）

在我們的開發中，傳統的ajax是客戶端向服務器發送請求，你需要拿什麼數據就要發什麼請求，像那種數據不斷變化的，我們只能隔一會請求一次，隔一會請求一次，這就是我們常說的ajax輪詢，但是websocket的出現極大的改善了這一現狀，一旦建立連接，服務器就能主動的向客戶端發送數據，美滋滋。接下來我帶大家來領會websocket的奧妙吧，看看實戰項目中的websocket前後端聯調是怎麼實現的。

1. 在服務端express中使用socket.io

// sockeet 在nodejs中需要與nodejs服務建立聯繫， 需要如下寫法
const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

2. 服務端啓動服務後，我們在客戶端需要建立連接,然後發送消息，代碼如下

<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script>
	/**
	  with ES6 import
	  import io from 'socket.io-client';
	**/
 
    window.onload = function () {
        var socket = io('http://localhost:3000');
        // emit向後端發送事件， sendMsg 前後端協商事件名 後端接收事件也用這個
        socket.emit('sendMsg', { text: ‘hello world’})
    }
</script>

3. 服務端接收到消息用on監聽事件，接收消息然後響應返回客戶端

io.on('connection', function (socket) {
	//  用on監聽客戶端發來的事件， data即數據
    socket.on('sendMsg', function (data) {
    	// 接收到數據 後端可以做操作， 例如存入數據庫中
        console.log(data)
        // 後端再把接收到的數據返回給前端，讓別人也看到， recivMgs也是定義好的事件名這個自己協商。
        io.emit('recivMgs', data)
    })
})

4. 客戶端再監聽服務端發出的事件，獲取數據，渲染頁面。

 socket.on('recivMgs', function (data) {
 			// 做自己想做的事情
            console.log(data)
 })

至此，一個簡單的socket前端端通信就完成了，是不是很簡單~~