socket.io的在express中的基本使用和vue-soocket.io的使用

学习官网https://socket.io/docs/

express下的socket.io的使用

服务器端Sever.js

1. 下载cnpm install socket.io --save
2. 引入使用，代码如下：

   var express=require("express");
   var app=express();
   var server=require("http").Server(app);
   var io=require("socket.io")(server);
   ...
   ...
   ...
   
   
   
   server.listen(3000,"192.168.1.100")
   //我的本机IP为192.168.100

    

3. socket.io的连接

   io.on("connection",socket=>{
       console.log("socket connection")
   })

   此时需要去配置客户端的socket.io了

客户端Client.html如下：

<input type="text" id="input">
<button id="btn">发送</button>

1. 打开node监听的http服务地址/socket.io/socket.io.js
   
   如我此次使用的服务器ip为192.168.1.100
   则客户端socket.io.js的地址就为http://192.168.1.100:3000/socket.io/socket.io.js(可以直接到浏览器打开)
2. 引入socket.io.js

   <script src="http://192.168.1.100:3000/socket.io/socket.io.js"></script>

3. 客户端向服务器发送广播（重点来啦）
    

   var socket=io("http://192.168.1.100")
   
   btn.onclick=function(){
       //向服务器发送to_server
       
      socket.emit("to_server","data from client")
   }

socket.emit(),第一个参数是要发送的事件名，第二个是要发送的值，可为对象或字符串

上接服务器Sever.js的步骤3：

4.服务器监听“to_server”

io.on("connection",socket=>{
    console.log("socket connection")

    //服务器监听客户端的to_server
    
    socket.on("to_server",data=>{
        
        console.log(data)//data from client        

        //此时可广播给客户端
        //io.emit("to_client","data from server")
        //socket.emit("to_client","data from server")

    })
})

5.监听成功之后，需要服务器给所有连接到该服务器的客户端广播数据的几种方式

• io.emit("to_client","data from client")  //广播给所有在线上的client用户（聊天室的实现）
• socket.emit("to_client","data from client")//谁发给我的，我就广播给谁（智能机器人的实现）

客户端监听服务器端的广播（上接客户端client的步骤3）

var socket=io("http://192.168.1.100")

btn.onclick=function(){
    //向服务器发送to_server
    
   socket.emit("to_server","data from client")
}



//监听服务器代码

socket.on("to_client",data=>{
    console.log(data)
})

 

6.备注：

• 关于聊天室的实现，因为有不同的聊天房间，所有在上面基本功能的实现上有所增加：
  
  1.客户端client
  
  在客户端连接socket时，需要在连接地址上添加roomdid

  var socket=io("http://192.168.1.100?roomid=1")

  2.服务端server
   

  io.on("connection",socket=>{
      console.log("socket connection")
  
      //服务器监听客户端的to_server
      socket.on("to_server",data=>{
  
  
          
          //取到roomid的值(我有引入url模块)
          var roomid=url.parse(socket.request.url,true).query.roomid
          
           socket.join(roomid)  
  
          //此时可广播给客户端(基础功能)
          //io.emit("to_client","data from server")
          //socket.emit("to_client","data from server")
  
          
          //广播给客户端(聊天室功能)
          
          io.to(roomid).emit(...)  //广播给这个聊天室的所有用户
          socket.broadcast.to(roomid).emit(...)  //广播给除了发送者之外的所有人
           
  
      })
  })

  vue-socket.io的使用：
  
  main.js:

• 下载cnpm install vue-socket.io --save

• 引入import VueSocketIO from 'vue-socket.io'

• 连接服务器Vue.use(new VueSocketIO({connection:'http://a.itying.com?id=a01}))

• 挂载在new vue()
  new Vue({
   ...
    sockets:{
      connect(){
        console.log("socket connection");//测试是否连接
      }
    },
    ...
  })
  
  组件中的使用（）
  data(){  
   return{
       ...
     }
  },
  sockets:{
    //后台代码io只监听了addcart事件
    addcart: function(){  /*接受服务器广播过来的addcart*/
      //更新购物车的数据
      this.getCartList();
    }
  },
  methods:{
     this.$socket.emit('addcart', "update")
  }

这是目前自己学习学到的部分，想好好写一篇的，结果并不是很满意啊，有点乱，还是得多写帖子啊，继续加油