socket.io之二: 基本应用

ranwu 发布于2019-08-20 15:54 / 904人阅读

摘要：提供了基于事件的实时双向通讯服务端与客户端连接同时提供了服务端和客户端的服务端必须绑定一个实例绑定隐式绑定通过实例化时传入端口或实例化后调用或函数进行隐式绑定。基于这种机制，可以实现双向交流。

socket.io提供了基于事件的实时双向通讯

服务端与客户端连接

socket.io同时提供了服务端和客户端的API

服务端socket.io必须绑定一个http.Server实例

绑定http.Server

隐式绑定

通过实例化时传入端口或实例化后调用listen或attach函数进行隐式绑定。socket.io内部实例化并监听http.Server

实例化时传入端口

let io = require("socket.io")(3000)

直接通过listen或attach函数绑定。listen与attach同义

let io = require("socket.io")
io.listen(3000) // io.attach(3000)

显示绑定

可以手动指定http.Server

实例化时绑定

let server = require("http").Server();
let io = require("socket.io")(server)

server.listen(3000)

通过listen或attach绑定

let server = require("http").Server();
let io = require("socket.io")()

io.listen(server) // io.attach(server)

server.listen(3000)

可以绑定express或koa等http框架

express

let app = require("express")
let server = require("http").Server(app)
let io = require("socket.io")(server)

app.listen(3000)

koa

let app = require("koa")()
let server = require("http").Server(app.callback())

let io = require("socket.io")(server)

app.listen(3000)

监听连接状态

当服务器端与客户端连接成功时，服务端会监听到connection和connect事件(connection与connect同义), 客户端会监听到connect事件, 断开连接时服务端的对应到客户端的socket与客户端均会均会监听到disconnect事件

服务端代码

let server = require("http").Server()
let io = require("socket.io")(server)

server.listen(3000);
io.on("connection", socket => {
  console.log("connect")
  socket.on("disconnect", () => {
    console.log("disconnect")
  })
  socket.disconnect()
})

运行后打印

connect
disconnect

客户端代码

let socket = io("http://localhost:3000")
socket.on("connect", () => {
  console.log("connect")
})
socket.on("disconnect", () => {
  console.log("disconnect")
})

运行后打印

connect
disconnect

传输数据

服务器与客户端的socket是一个关联的EventEmitter对象，客户端socket派发的事件可以通以被服务端的socket接收，服务器端socket派发的事件也可以被客户端接受。基于这种机制，可以实现双向交流。

现在模拟这样一种情况：客户端不停发送随机数，当随机数大于0.95时，服务端延时1s后向客户端发送警告以及警告次数

服务端代码

let server = require("http").Server()
let io = require("socket.io")(server)

server.listen(3000);
io.on("connection", socket => {
  socket.on("random", value => {
    console.log(value)
    if (value > 0.95) {
      if (typeof socket.warning === "undefined") socket.warning = 0
      setTimeout(() => {
        socket.emit("warn", ++socket.warning)
      }, 1000)
    }
  })
})

socket对象可以用来存储状态信息和自定义数据,如socket.warning

客户端代码

let socket = io("http://localhost:3000")
let interval = setInterval(() => {
  socket.emit("random", Math.random())
}, 500)
socket.on("warn", count => {
  console.log("warning count: " + count)
})
socket.on("disconnect", () => {
  clearInterval(interval)
})

传输流

socket.io可以处理流

服务端代码

io.on("connection", function (socket) {
  let stream = ss.createStream()
  ss(socket).emit("script", stream)
  fs.createReadStream(__filename).pipe(stream)
})

客户端代码

let socket = io("http://localhost:3000") 
ss(socket).on("script", stream => {
  let buffer = "" 
  stream.on("data", data => {
    buffer += data.toString()
  })
  stream.on("end", () => {
    console.log(buffer)
  })
})

更多文章的目录在这里

专线服务私有云 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82577.html

socket.io原理和实战

摘要：就是为了解决这一问题产生的，现在已经写入标准，主流浏览器基本支持。由于最近写项目要使用socekt.io技术，于是研究了一段时间，把自己早期学习阶段写的小游戏改造了一下，变成了一个比较完整的小程序。点击这里可以体验游戏,建议使用手机模式查看，也可以下载打包好的webapp，安卓版已上架酷安市场,扫码可下载体验： showImg(https://segmentfault.com/img...

ivyzhang 2019-08-22 13:59 评论0 收藏0
基于 socket.io 实现实时你画我猜游戏

摘要：演示地址实时画板聊天室你画我猜聊天室图片抢先看解释关于是基于实现的套接字前端后端数据交互的库，通过它的封装，使用者可以很方便的开发，而且支持长轮询等方法，兼容低版本浏览器。最后推荐一个实时的更加优秀的游戏。前言一直都想好好的学习运用node，一直都不知道要做什么东西，最近Java Web老师要求做个前端的应用，既然是前端应用，那肯定得是单页应用了，而且node很适用于高并发的实时应...

jsummer 2019-08-21 10:53 评论0 收藏0
Node.js和Socket.IO搭建Web Chat application

摘要：是，是的，它可以建立起一个基于事件的实时的双向交流方式，极大的简化了的处理过程。开始搭建这个应用几乎只需要和最初级的知识，因为只搭建一个基本的程序。安装好后创建一个，来配置应用。 WebSocket与Socket.IO WebSocket是一种协议，有了它就可以在TCP协议的基础上在浏览器和服务器之间建立起了一种全双工的通道，它完全兼容HTTP协议，有了它使得Web应用程序可以在浏览器...

kviccn 2019-08-20 16:30 评论0 收藏0
socket.io之一: 介绍

摘要：在标准没有推出之前，轮询是唯一可行的方式通过浏览器也可以，但这里不做讨论。这种方式存在延时且对服务端造成很大负载。直到年，才标准化一种基于套接字进行收发数据的协议。现如今主流浏览器均已支持。 socket.io提供了基于事件的实时双向通讯历史 Web端与服务器间的实时数据传输的是一个很重要的需求，但最早只能通过AJAX轮询询实现。在WebSocket标准没有推出之前，AJAX轮询是唯...

william 2019-08-20 15:53 评论0 收藏0
一篇文章带你彻底搞懂NIO

摘要：阻塞当进行读写时，线程是阻塞的状态。当任何一个收到数据后，中断程序将唤起进程。接收数据当收到数据后，中断程序会给的就绪列表添加引用。当接收到数据，中断程序一方面修改，另一方面唤醒等待队列中的进程，进程再次进入运行状态如下图。本篇文章目的在于基本概念和原理的解释，不会贴过多的使用代码。什么是NIO Java NIO (New IO)是 Java 的另一个 IO API (来自 jav...

ziwenxie 2019-08-16 18:39 评论0 收藏0