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前端端通信就完成了，是不是很简单~~