node及socket.io实现简易websocket双向通信

技术栈： vue2.0 + node + websocket( socket.io )

1. 安装依赖

初始化vue项目后输入下方指令安装依赖包

// 推荐cnpm安装
npm i vue-socket.io -S  // for 客户端
npm i socket.io -S  // for 服务端node

2. 新建服务端目录如下图  server / app.js 

 

//  app.js
var app = require('http').createServer();
var io = require('socket.io')(app);
var PORT = 8081;

app.listen(PORT);
/*
    *新手必读
    *function中的socket为每个客户端单独连接的socket实例，只通知当前连接用户
    *io.sockets 通知所有连接用户
    *socket.broadcast 给除了自己以外的客户端广播消息
*/
io.on('connection', function (socket) {
    for(let i=0; i<100; i++){
        setTimeout(()=>{
            io.sockets.emit('progress',i);
            console.log("当前进度为",i+1);
        },300*i)
    }
})

console.log('app listen at：'+PORT);

一般而言，运行node程序只需要在文件当前目录下命令行输入 node filename 即可，但是，既然是和vue脚手架一起构建，就充分利用起来。

打开package.json , 在 scripts 中 添加一行

"server": "node server/app.js",

现在，直接在vue项目的根目录运行 npm run server 命令就可以开启服务了。

3.  为了简便，直接修改vue初始化项目中的components下的HelloWorld.vue文件

// HelloWorld.vue文件

<template>
  <div class="process" >
    <progress max="100" :value="progressValue"></progress>
  </div>
</template>
<script>
  import Vue from 'vue'
  import VueSocketio from 'vue-socket.io'
  Vue.use(VueSocketio, 'ws://localhost:8081') // 注意和本地服务器地址及端口一致

  export default {
    data(){
      return{
        progressValue: 0, // 进度值
      }
    },
    //（socket.on）绑定事件放在sockets中
    sockets:{ 
      // 创建连接
      connect(){
          console.log('连接成功啦')
      },
      // 监听自定义progress事件，需与服务端emit事件名一致
      progress(res){
        this.progressValue = res;
        console.log('2222',res)
      }
    }
  }
</script>
<style scoped>
  .process { text-align:center; }
</style>

最后，运行代码

npm run server   // 开启服务

切记，不要关闭窗口，然后再新开命令行，注意，是新开一个，运行

npm run dev

就能看到一个进度条的效果了( 客户端（浏览器）发起请求，然后服务端不停传输数据，客户端监听对应事件和数据并重新渲染页面 )。

这只是很简单的一个应用，在此基础上很容易就可以改成比较多人在线聊天室的功能。