vue学习之（socket）

最新推荐文章于 2023-06-11 13:19:33 发布

no的征程

最新推荐文章于 2023-06-11 13:19:33 发布

阅读量361

点赞数

分类专栏： vue nodejs

本文链接：https://blog.csdn.net/qq_39773416/article/details/104985133

版权

nodejs 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vue

6 篇文章 1 订阅

订阅专栏

实现简单的socket通信

服务器端

// 创建服务器
let app = require('http').createServer()
// 通关服务器生成socket对象
let io = require('socket.io')(app)
app.listen(80,(req,res)=>{
  console.log('链接成功');
  
})

// 实时通信
// 监听连接事件，on为监听
io.on('connection',function(socket){
  // 发送事件，emit为发送
  socket.emit('message',{hello:'你好我是机器人'})
  socket.emit('news',{hello:'大傻逼'})
  socket.on('say',function(data){
    socket.emit('message',{hello:'你说啥我听不清'})
  })
  })

客户端

<script src="./socket.io.js"></script>
<body>
  <div>
    <div id="content">

    </div>
  </div>
  <div>
    <input type="text" id="input" />
    <button class="el-button el-button-primary el-button-large" type="button" onclick="say()">发送消息</button>
  </div>
  <script>
  // 发送连接事件给服务端，参数为服务端地址
    var socket = io.connect('http://localhost:80')
    
    socket.on('message',function(data){
      let p = document.createElement('p')
       p.innerHTML = `机器人：<span>${data.hello}</span>`
       document.getElementById('content').appendChild(p)
    })
    
      // 监听 news 会话
    socket.on('news', function (data) {
      console.log(data);
      let html = document.createElement('p')
      html.innerHTML = `大傻逼说：<span>我知道了，你说“${data.hello}”</span>`
      document.getElementById('content').appendChild(html)
    });
        // 按钮点击事件
    function say() {
      let t = document.getElementById('input').value
      if (!t) return
      let html = document.createElement('p')
      html.innerHTML = `你细声说：<span>${t}</span>`
      document.getElementById('content').appendChild(html)
      socket.emit('say', { my: t})
    }
  </script>

在express项目中使用socket

创一个文件作为创建socket

let socketio = {}
function getSocket(server){
socketio.io = require('socket.io')(server);
let io = socketio.io

// 实时通信
io.on('connection',function(socket){
  socket.emit('message',{hello:'你好我是机器人'})
  socket.emit('news',{hello:'大傻逼'})
  socket.on('say',function(data){
    socket.emit('message',{hello:'你说啥我听不清'})
  })
  })
}
socketio.getSocket = getSocket
module.exports = socketio

在www中执行

var socketio = require('../socketio')
socketio.getSocket(server)

实现socket通信

服务端

  // 首先获取socket对象id
  // 给所有socket对象发送数据
    io.sockets.emit('add',{
      id:socket.id,
      content:'新用户'
    })
  
  socket.on('sendUser',function(data){
    // 以下面的形式进行数据发送
    // data = {
    //   from:'发送者id',
    //   to:'收到者id',
    //   content:''
    // }
    console.log(data);
    // 这里实现通过socket的id发送数据
    socket.to(data.to).emit('sendClient',data)
  })

发送方

  socket.emit('sendUser', 
  { content:'我是发送方',from:'WMzvGAMMb_D0_ligAAAC',to:'APvqHDoUXcbsmWY0AAAD',userName:'小红'})

接收方

    socket.on('sendClient',function(data){
      console.log(data); 
      // { content:'我是发送方',from:'WMzvGAMMb_D0_ligAAAC',to:'APvqHDoUXcbsmWY0AAAD',userName:'小红'}
    })

命名空间的使用

在socketjs文件中

function getSocket(server){	
  // ........
  // 使用io.of产生命名空间
  let qq = io.of('/qq')
  qq.on('connection',function(){
    qq.emit('news',{hello:'我是大傻逼'})
  })

  let wx = io.of('/wx')
  wx.on('connection',function(){
    wx.emit('news',{hello:'我也是大傻逼'})
  })
}

html文件中
就可以实现连接两个socket对象

    var socket = io.connect('http://localhost:3000/qq')
      // 监听 news 会话
    socket.on('news', function (data) {
      console.log(data);
      let html = document.createElement('p')
      html.innerHTML = `大傻逼说：<span>我知道了，你说“${data.hello}”</span>`
      document.getElementById('content').appendChild(html)
    });

    var wx = io.connect('http://localhost:3000/wx')
    wx.on('news', function (data) {
      console.log(data);
      let html = document.createElement('p')
      html.innerHTML = `大傻逼说：<span>我知道了，你说“${data.hello}”</span>`
      document.getElementById('content').appendChild(html)
    });

房间，简单群聊

function getSocket(server){	
  // ........
  //
  socket.on('addrome',function(data){
    socket.join('qun')
    console.log('急不来');
  })

  socket.on('send',function(data){
    console.log(data);
    socket.to('qun').emit('qun','你好')
    console.log('进来');
  })
  }

  <script>
     var socket = io.connect('http://localhost:3000')

    socket.emit('addrome',{room:'qun'})
    
    socket.on('qun',function(data){
      console.log(data);
    })
    // 按钮点击事件
    function say() {
      socket.emit('send',{room:'qun',mes:'我是大傻逼'})
    }


  </script>

no的征程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue学习之（socket）

实现简单的socket通信服务器端// 创建服务器let app = require('http').createServer()// 通关服务器生成socket对象let io = require('socket.io')(app)app.listen(80,(req,res)=>{ console.log('链接成功'); })// 实时通信// 监听连接事件...
复制链接

扫一扫