前言:

传统的客户端与服务器进行通信,都是客户端向服务端发送请求,服务端进行响应,否则一般不会自动进行响应。单向,如果要持续获取服务端资源,则需要持续发送请求

初解决方案:轮询:客户端让http请求保持一段时间,就可以进行一段时间中的持续请求

现解决方案:webSockets:专门用来做实时应用的协议,也是本文重点

1:基本使用(这里使用nodejs做服务端)

服务端

const webSockets = require('ws')
const wss = new webSockets.Server({ port: 3000 }) //创建新服务并且设置端口 wss.on('connection', ws => {
console.log("有人连进来了")
// 需要在同一个连接中进行使用
ws.on("message",data=>{
ws.send(data+'真的')
})
ws.on('close', () => {
console.log("有人退出了")
})
})

客户端

<script>
const ws = new WebSocket("ws://localhost:3000")
ws.addEventListener("open",()=>{
console.log("连接上服务器了")
ws.send("学习让你快乐吗?")
})
ws.addEventListener("message",({data})=>{
console.log(data)
})
</script>

结果



2:使用socket.io

内部封装了websocket,而且如果对应浏览器不支持websocket,socket.io会自动调回到长轮询,相对比较智能,也更方便

服务端

// express应用对象
const app = require("express")()
// 创建服务器
const server = require("http").createServer(app)
const { Server } = require("socket.io")
const io = new Server(server, { cors: true })
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
io.on("connection", (socket) => {
console.log('进入了聊天室')
socket.emit("hello", "world");
// 在这里获取到客户端传过来的消息
socket.on("chat message", msg => {
io.emit("t", msg)
})
socket.on('disconnect', () => {
console.log("离开了聊天室")
})
});
server.listen('4000', () => '服务器开启')

客户端

    <form>
<input type="text">
<button>发送</button> </form>
<ul></ul>
<script type="module">
import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
const socket = io("http://127.0.0.1:4000");
const form = document.querySelector("form")
const input = document.querySelector("input")
const ul = document.querySelector("ul")
form.addEventListener("submit", e => {
e.preventDefault()
if (input.value) {
socket.emit("chat message", input.value)
input.value = ""
}
})
//监听t事件
socket.on("t", msg => {
console.log(msg)
const li = document.createElement("li")
li.textContent = msg
ul.appendChild(li)
}) socket.on("hello", (data) => {
console.log(data)
})
</script>

该例子总体流程是:用户在客户端点击提交,然后发布(chat message)事件并携带参数过去,服务端监听(on)并将此消息在服务端进行发布(这样就可以多个客户端都收到其中一个客户端发的消息,从而实现了实时,服务端在其中做到类似广播的效应),然后各个客户端可以监听到t事件并将其渲染在列表或者其他使用。

总结:

这样当我们打开多个页面。进行发送消息,消息会就会同步到多个客户端,从而实现聊天室等功能

问题

作为一个学习node不久的小白,其中有一个疑问是我花时间才搞清楚的,希望可以帮助到跟我有同样疑虑的学习者

这里为什么可以这样去写呢?

// express应用对象
const app = require("express")()
// 创建服务器
const server = require("http").createServer(app) 解释: 里面传入app是因为http.createServer接受可用于处理传入 / 传出请求 / 响应的类
// 与Dependency Injection相关 它接受将在内部用于处理传入消息和传出响应的外部类。
// 这样下面就可以使用server.listen() listen()方法本来是app应用中的
// 简单来说是基础http模块来生成服务器实例:这样方便http和https的写法,而且还支持express的一些方法

webSocket的基本使用与socket.io库使用的更多相关文章

  1. Practical Node.js (2018版) 第9章: 使用WebSocket建立实时程序,原生的WebSocket使用介绍,Socket.IO的基本使用介绍。

    Real-Time Apps with WebSocket, Socket.IO, and DerbyJS 实时程序的使用变得越来越广泛,如传统的交易,游戏,社交,开发工具DevOps tools, ...

  2. 轮询以及webSocket与socket.io原理

    概述: 首先,我们知道,起初的http协议只是为了能够进行通信而被创造出来(也就是请求-响应的过程).并没有双向通信这一说,后面随着历史业务的需求,人们使用轮询http来解决双向通信也就是使用xhr或 ...

  3. 9、socket.io,websocket 前后端实时通信,(聊天室的实现)

    websocket 一种通信协议 ajax/jsonp 单工通信 websocket 全双工通信 性能高 速度快 2种方式: 1.前端的websocket 2.后端的 socket.io 一.后端so ...

  4. socket.io简介

    websocket是一种比较简单的协议,各种语言中都有很多实现版本,实际上它们差别不大,都是在websocket的基础上做些封装,随便选一个即可. socket.io就是众多websocket库中的一 ...

  5. nodejs的socket.io学习笔记

    socket.io学习笔记 1.服务器信息传输: 2.不分组,数据传输: 3.分组数据传输: 4.Socket.io难点大放送(暂时没有搞定): 服务器信息传输 1. // send to curre ...

  6. 利用socket.io实现消息实时推送

    最近在写的项目中存在着社交模块,需要实现这样的一个功能:当发生了用户被点赞.评论.关注等操作时,需要由服务器向用户实时地推送一条消息.最终完成的项目地址为:socket-message-push,这里 ...

  7. Node.js精进(11)——Socket.IO

    Socket.IO 是一个建立在 WebSocket 协议之上的库,可以在客户端和服务器之间实现低延迟.双向和基于事件的通信. 并且提供额外的保证,例如回退到 HTTP 长轮询.自动重连.数据包缓冲. ...

  8. Node学习笔记(三):基于socket.io web版你画我猜(二)

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  9. Socket.IO聊天室~简单实用

    小编心语:大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐!!这一次要分享的东西小编也不是很懂啊,总之小编把它拿出来是觉地比较稀奇,而且程序也没有那么难,是一个比较简单的程序,大家可以多多试试~ ...

随机推荐

  1. Python实现将excel文件转化为html文件

    需要转化的excel文件(nsrxx.xlsx): 源代码: import pandas as pdimport codecspd.set_option('display.width', 1000)p ...

  2. django框架4

    内容概要 编辑删除功能编写 虚拟环境 django路由层版本区别 视图函数的返回值 JsonResponse对象 form表单上传文件 request其他方法 FBV与CBV(基于函数的视图.基于类的 ...

  3. FlinkSQL源码阅读-schema管理

    在Flink SQL中, 元数据的管理分为三层: catalog-> database-> table, 我们知道Flink SQL是依托calcite框架来进行SQL执行树生产,校验,优 ...

  4. OAuth2学习中的一些高频问题的QA

    关于OAuth2相信很多初学者都有一些疑问,胖哥将这些疑问一一收集了起来做成了QA,或许能帮助学习者. OAuth2相关的QA Q:OAuth2 的一些常用场景? A: OAuth2主要用于API授权 ...

  5. QT 基于QScrollArea的界面嵌套移动

    在实际的应用场景中,经常会出现软件界面战场图大于实际窗体大小,利用QScrollArea可以为widget窗体添加滚动条,可以实现小窗体利用滚动条显示大界面需求.实现如下: QT创建一个qWidget ...

  6. Linux免密登陆配置(互信配置)

    Linux免密登陆配置(互信配置) 1.生成当前用户的秘钥文件 [oracle@localhost .ssh]$ ssh-keygen -t rsa 2.配置远程登录用户的公钥文件 将公钥文件拷贝至另 ...

  7. 一文带你搞懂 JWT 常见概念 & 优缺点

    在 JWT 基本概念详解这篇文章中,我介绍了: 什么是 JWT? JWT 由哪些部分组成? 如何基于 JWT 进行身份验证? JWT 如何防止 Token 被篡改? 如何加强 JWT 的安全性? 这篇 ...

  8. BUUCTF-N种方法解决

    N种方法解决 这题提供的是一个key.exe 运行一下发现没办法运行,老办法,放到16进制打开看看. 这个data:image/jpg很明显了,base64转图片. 编码完成得到了一张二维码,再将得到 ...

  9. 使用html2canvas,由html转换canvas时,出现图片丢失问题解决方案

    在img标签上加上crossorigin="anonymous":如果是图片地址是跨域网址,请将图片转换为base64格式: 源码如下: <!DOCTYPE html> ...

  10. UiPathExcel读取操作

    一.Uipath操作Excel的相关基本概念 1.UiPath操作Excel的两组方法 App Integration > Excel   VS  System > File > W ...