27. socket.io - 《express》

安装使用
创建一个服务端的socket
创建一个客户端socket

官网: https://socket.io/docs/v2/client-initialization/

安装使用

npm i socket.io@2.3.0

创建一个服务端的socket

const express = require('express');
const http = require('http');
const path = require('path');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
app.use(express.static(path.resolve(__dirname, 'public')))
const options = { /* ... */ };
const io = socketIo(server, options);
io.on('connection', socket => {
    // 有一个新的客户端链接到服务器成功以后,触发事件
    console.log('新的客户端链接进来了');
    // 监听客户端的clientMsg消息
    socket.on('clientMsg', chunk => {
        console.log(chunk.toString('utf-8'));
    })
    const timer = setInterval(() => {
        // 每两秒钟,发送一个消息给客户端,消息名字为serverMsg
        socket.emit('serverMsg', 'i am server')
    }, 2000);
    socket.on("disconnect", () => {
        clearInterval(timer)
        console.log('client closed');
    })
});
server.listen(12306, () => {
    console.log('server start on port 12306')
});

创建一个客户端socket

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
    <h1>Welcome Websocket</h1>
    <button>给服务器发消息</button>
</body>
<script>
    const socketIo = io.connect(); // 如果是同一个域下,可以不写地址,如果不是则需要写地址,https://server-domain.com
    document.querySelector('button').onclick = function () {
        socketIo.emit('clientMsg', 'msg from client')
    }
    socketIo.on('serverMsg', (chunk) => {
        console.log(chunk)
    })
    socketIo.on('disconnect', () => {
        console.log('server closed')
    })
</script>
</html>

监听客户端的消息,clientMsg是客户端和服务器商定好的消息类别,可以有很多消息类别,服务器可以根据不同的消息类别的名字,进行不同的处理
```
// 监听客户端的clientMsg消息
  socket.on('clientMsg', chunk => {
      console.log(chunk.toString('utf-8'));
  })
```
客户端向服务器发送消息,消息类别为商定好的clientMsg,
```
socketIo.emit('clientMsg', 'msg from client')
```

服务器端向客户端发送消息和客户端向服务端发送消息一样,商定消息类别serverMsg,

const timer = setInterval(() => {
      // 每两秒钟,发送一个消息给客户端,消息名字为serverMsg
      socket.emit('serverMsg', 'i am server')
  }, 2000);

客户端监听服务端消息,消息类别为商定好的serverMsg,客户端可以根据不同的消息类别,做不同的处理
```
socketIo.on('serverMsg', (chunk) => {
      console.log(chunk)
  })
```

客户端/服务端断开链接,另一方可以监听到

socket.on("disconnect", () => {
      clearInterval(timer)
      console.log('client closed');
  })