websocket.io

更新日期: 2019-06-13阅读: 3k标签: socket

一. 服务器端

使用express服务

const path = require('path');
const app =express();//其实是一个监听函数
const server = require('http').createServer(app);
//使用静态文件中间件,把当前目录下面的public目录作为静态文件的根目录
app.use(express.static(path.resolve('public'))); 

a.简单的使用websocket.io

let io = require('socket.io')(server);
io.on('connection',function(socket){ 
  console.log('客户端连接成功');
  socket.on('message',function(message){
  //对发送消息过来的客户端发送消息
  socket.send('客户端发过来的消息0'+message) 
  //向所有的客户端发送消息,但不包括自己
  socket.brocast.emit('message',message)
  //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
  io.emit('message',message)
  })
})

b 使用命名空间 实例中两个命名空间info job

//io.on('connection',function('socket){}) 等价于===io.of('/').on('connection',function(socket){})
io.of('/dev').on('connection',function(socket){ 
  console.log('客户端连接成功');
  socket.on('message',function(message){
    io.of('/dev').emit('message',message) //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
  })
})

io.of('/job').on('connection',function(socket){ 
  console.log('客户端job连接成功');
  socket.on('message',function(message){
      console.log('客户端发过来的消息:'+message);
      io.of('/job').emit('message',message) //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
  })
})

c. 进入不同的命名空间不同房间(以info命名空间为例)


io.of('/info').on('connection',function(socket){ 
  console.log('客户端info连接成功');
  let roomName
  socket.on('message',function(message){
     //向命名空间内的对应roomName的客户端广播
     io.of('/info').in(roomName).emit('message',message)
  })
  //进入房间 socket.join(name)中的join是关键字固定的
  socket.on('join',function(name){
    roomName = name;
    socket.join(name)
  })
  //离开房间 socket.leave(name)中的leave是关键字固定的
  socket.on('leave',function(name){
    socket.leave(name);
     roomName = null;
  })
})


二. 客户端 vue为例

a. 引入socket.io-client

  import io from 'socket.io-client'

b.建立连接

 //const socket = io('ws://localhost:8080')  
 //可以有很多种写法io()==io('ws://localhost:8080'),socket=io()貌似不行
 //socket = io.connect('ws://localhost:8080') 
 //一般使用下面的写法
 const socket = io('http://localhost:8080')

连接服务器不同的命名空间,与服务器端命名空间对应

 const socket = io('http://localhost:8080/info')
  const socket = io('http://localhost:8080/job')

c. 监听

mounted(){
      socket.on('connect',function(){ //服务器连接成功的回调函数
        console.log('连接成功');
      });
     socket.on('message',function(message){
         console.log('服务器发送过来的消息:',message);
      })
      socket.on('error',function(error){
         console.log('infoError',error);
      })
    },
    methods: {
      fayan(){  //给服务器发送消息
        socket.send(this.content1)  // this.content1要给服务器发送的消息
      },
      join(name){ //进入不同的房间
        socket.emit('join',name)
      },
	  
      leave(name){ //离开不同的房间
        socket.emit('leave',name)
      },
    }

d html代码

<template>
  <div>
   <Input v-model="content1"></Input>
   <Button @click='fayan'  >发言</Button>
    <Button @click="join('red')" style='margin-left: 10px;' >进入红房间</Button>
    <Button @click="join('green')" style='margin-left: 10px;' >进入绿房间</Button>
     <Button @click="leave('red')" style='margin-left: 10px;' >离开红房间</Button>
    <Button @click="leave('green')" style='margin-left: 10px;' >离开绿房间</Button>
  </div>
</template>


链接: https://fly63.com/article/detial/3673

web Socket和Socket.IO框架

HTTP无法轻松实现实时应用:HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子)

Nginx 转发 socket 端口配置

Nginx 转发 socket 端口常见场景:在线学习应用,在常规功能之外,增加一个聊天室功能,后端选择 swoole 提供服务提供者,同时不想前端直接 ip:port 方式链接到服务,需要使用 Nginx 进行转发。

Socket通信原理.一文了解Socket

Socket 的中文翻译过来就是“套接字”。套接字是什么,我们先来看看它的英文含义:插座。Socket 就像一个电话插座,负责连通两端的电话,进行点对点通信,让电话可以进行通信,端口就像插座上的孔,端口不能同时被其他进程占用。而我们建立连接就像把插头插在这个插座上

Vue.js 如何使用 Socket.IO

Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、

轮询、长轮询、长连接、socket连接、WebSocket

轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接;长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接

封装小程序的websocket

这两天的工作中,我重构了一个项目里的客服聊天功能,是小程序的,用了小程序提供的websocket有关的接口,我感觉很简单,和web端的接口大体一致,不过我喜欢封装后去使用,封装成一个类,创建一个类的实例

使用Promise封装Websocket

await 后面若是跟的Promise,则接受Promise resolve的值。Promise reject的值需要try...catch住,或者await 后面的表达式跟着.catch()

socket.io的接入使用

传统的客户端和服务器通信协议是HTTP:客户端发起请求,服务端进行响应,服务端从不主动勾搭客户端。这种模式有个明显软肋,就是同步状态。而实际应用中有大量需要客户端和服务器实时同步状态的场景

如何在 React 中正确的使用 socket.io 客户端?

最近在一个 React 项目中,使用到了 socket.io 处理即时消息,这里面有几点容易被忽视的问题,例如:在 React 单页面应用中如何防止出现多个 socket 实例、在任意的的组件内如何方便的取到 socket 实例

Web 全栈推拉能手 Socket.IO 库

Socket.IO 不仅支持 WebSocket,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!