socket.io的接入使用

时间: 2020-02-04阅读: 295标签: socket

WebSocket 简介

传统的客户端和服务器通信协议是HTTP:客户端发起请求,服务端进行响应,服务端从不主动勾搭客户端。

这种模式有个明显软肋,就是同步状态。而实际应用中有大量需要客户端和服务器实时同步状态的场景,比如聊天室、股票行情、在线共享文档等都需要客户端实时拿到服务器的最新状态。

针对这种实时同步的需求,一种简单的方式是轮询,比如每隔5s发一次http请求去拿服务器最新的状态数据。但这种方式会存在数据延迟,浪费带宽等副作用。

更完美的方式是使用WebSocket,浏览器原生支持,W3C标准协议,客户端和服务器建立持久性连接可以互发消息。


socket.io 简介

socket.io 是一个类库,内部封装了WebSocket,可以在浏览器与服务器之间建立实时通信。

如果某些旧版本的浏览器不支持WebSocket,socket.io会使用轮询代替。另外它还具有可发送二进制消息、多路复用、创建房间等特性,因此相比直接使用原生WebSocket,socket.io是更好的选择。

开发一个实时应用主要分两部分:服务端和客户端,socket.io分别提供了相应的npm包供我们方便地调用。

接下来就通过一个生动形象且有趣的栗子分别介绍这两大块。

现在假设李白,瑶,吕布,后羿,貂蝉5个人加入了一个叫 KPL 的房间,在文章结束时我们将拥有一个麻雀虽小五脏俱全的峡谷英雄在线聊天室


服务端api

首先安装socket.io提供的服务端npm包:

npm i socket.io

可以与 Express 框架配合使用:

const http = require('http')
const app = require('express')()
const server = http.createServer(app)
const io = require('socket.io')(server)
server.listen(3000)

也可以与 Koa 框架配合使用

const http = require('http')
const Koa = require('koa')
const app = new Koa()
const server = http.createServer(app.callback())
const io = require('socket.io')(server)
server.listen(3000)

使用起来就是这么简单。接下来就可以写业务逻辑啦

io.on('connect', client => { // client 即是连接上来的一个客户端
  console.log(client.id) // id 是区分客户端的唯一标识

  client.on('disconnect', () => {}) // 客户端断开连接时调用(可能是关掉页面,网络不通了等)
})

connect 和 disconnect 是 socket.io 内置的事件类型,用于在客户端连接和断开的时候做一些事情。

在客户端建立连接时需要把他们加入到一个房间里去,类似创建了一个聊天室

  console.log(client.id)
+ client.join('KPL') // 将客户端加入到 KPL 房间内
  client.on('disconnect', () => {})

紧接着瑶进来秒发了首条消息:我打野,不给就送

服务器在收到这条振奋人心的消息后需要立即同步给其他四位队友

  client.join('KPL')
+ client.on('talk', message => {
+   client.to('KPL').emit('talk', message) // 发送给房间里的每个人,除了发送者
+ })
  client.on('disconnect', () => {})

服务端的功能到这基本上就开发完了。创建了一个房间,并在收到成员消息时立即同步给房间里的其他成员


客户端api

socket.io 为客户端提供了另一个npm包,直接安装

npm i socket.io-client

接下来就可以在页面上建立到服务器的连接啦

import io from 'socket.io-client'

const socket = io() // 建立连接

向服务器发送消息

  const socket = io()
+ socket.emit('talk', '我打野,不给就送')

接收服务器发来的消息

  const socket = io()
+ socket.on('talk', message => {
+ })

李白看到了瑶的消息,强忍住问候对方家人的冲动,像哄那啥似地说道:

  socket.on('talk', message => {
+   socket.emit('talk', '你买个石头骑在我头上他不香么')
  })

客户端的功能到这基本上也开发完了。核心api就是on和emit用于收发消息,既简单又优雅。


最后

至此一个可以实时发送接收消息的聊天室就完成了,虽然简陋,但核心功能完备。

瑶最终倔强地打了野,李白选择了上路,3分钟被对面捶到高地,后羿在家里等鸟,吕布和貂蝉躲在蓝buff旁边的草丛里聊天,就这样在李白和瑶互相拉票举报对方的全局消息中游戏结束


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7409

Socket通信原理.一文了解Socket

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

web Socket和Socket.IO框架

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

使用Promise封装Websocket

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

websocket.io

服务器端:使用express服务;简单的使用websocket.io;使用命名空间 实例中两个命名空间info job;客户端 vue为例引入socket.io-client

封装小程序的websocket

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

Vue.js 如何使用 Socket.IO

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

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

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

Nginx 转发 socket 端口配置

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

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广