socket.io之二: 基本應用

ranwu 發布于2019-08-20 15:54 / 1070人閱讀

摘要：提供了基于事件的實時雙向通訊服務端與客戶端連接同時提供了服務端和客戶端的服務端必須綁定一個實例綁定隱式綁定通過實例化時傳入端口或實例化后調用或函數進行隱式綁定。基于這種機制，可以實現雙向交流。

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)
  })
})

更多文章的目錄在這里

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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