Node.js socket 双向通信

使用场景: 聊天室；大量数据常驻交互；

技术栈： Node.js, Vue.js || 原生JS

服务端代码:

const app = require('http').createServer()
const io = require('socket.io')(app)
app.listen(8877)

io.on('connection', scoket => {
  let i = 1
  const t = setInterval(()=>{
    i++
    if(i >= 12) {
      clearInterval(t)
    }
    // 服务端往客户端发送消息
    scoket.emit('news', { hello: 'world', t: new Date().getTime() })
  }, 1000)

  // 服务端监听客户端的消息
  scoket.on('receiveEvent', data => {
    console.log('receiveEvent: ', data)
  })
})

客户端代码:

-- Vue 例子：

<template>
  <div>
    <p @click="clientToServer">scoket:</p>
    <p v-for="(item,index) in arr" :key="index">{{item}}</p>
  </div>
</template>

<script>
import io from 'socket.io-client'
export default {
  beforeMount() {
    // 初始化 客户端 socket
    this.socket = io('http://localhost:8877')
  },
  data() {
    return {
      arr: []
    }
  },
  mounted() {
    // 监听服务端 scoket 'news' 数据流
    this.socket.on('news', data => {
      this.arr.push(data)
    })
  },
  methods: {
    // 客户端往服务端发送消息
    clientToServer() {
      this.socket.emit('receiveEvent', 'Hi~ im from clientSide')
    }
  },
  // 销毁 socket
  beforeDestroy() {
    this.socket.close('news')
  }
}
</script>

-- 原生代码示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Socket Demo</title>
  </head>
  <body>
    <button>Send Msg</button>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
  <script>
    const wsUrl = "http://localhost:8877";
    window.onload = () => {
      const socket = io.connect(wsUrl);
      // 监听服务端消息
      socket.on("news", data => {
        console.log("news: ", data);
      });
      // 往服务端发送消息
      document.getElementsByTagName('button')[0].onclick = function() {
        socket.emit('receiveEvent', 'msg from client!')
      }
    };
  </script>
</html>