千家信息网

nodejs如何结合Socket.IO实现websocket即时通讯

发表于:2025-02-02 作者:千家信息网编辑
千家信息网最后更新 2025年02月02日,这篇文章给大家分享的是有关nodejs如何结合Socket.IO实现websocket即时通讯的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为什么要用 websocketw
千家信息网最后更新 2025年02月02日nodejs如何结合Socket.IO实现websocket即时通讯

这篇文章给大家分享的是有关nodejs如何结合Socket.IO实现websocket即时通讯的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

为什么要用 websocket

websocket 是一种网络通信协议,一般用来进行实时通信会使用到。

websocket 协议和 http 协议类似,http 协议有一个缺陷,只能由客户方端发起请求,服务端根据请求 url 和传过去的参数返回对应结果

websocket 是双向通信的,只要 websocket 连接建立起来,可以由客户端给服务端发送数据,也可以由服务端主动给客户端发送数据

websocket 适用场景:网页版聊天室,网页版客服,前后端频繁交换数据的即时通讯场景。

Socket.io

双向和低延迟的websocket通信包,高性能,高可靠,可伸缩。
(简单地讲,就是将websocket进行封装和优化。)


Socket.IO 是一个库,可以在浏览器和服务器之间实现实时、双向和基于事件的通信。 它包括:

  • server端

  • client端

官方网址
https://socket.io/
官方文档
https://socket.io/docs/v4/

开源项目

以下代码和时间项目会发布在开源项目【nodejs-study】,欢迎下载和学习

效果预览

输入node app 运行服务之后可以通过 http://localhost:3000/ 进行访问,如果看到输出监听3000端口和前端显示hello world证明项目启动成功。

前端页面:一个聊天的UI框,包含发送和接收功能 http://localhost:3000/test


后台websocket:监听和答复

app.js

首先需要安装express和socket.io库

输入npm install express --save或者yarn add express

输入npm install socket.io--save或者yarn add socket,io

接下来实现 对 //test 两个路径的监听

  • /返回hello world

  • /test返回html连接页面

socket.on("chat message",callback function)
表示开始监听"chat message"通道,只要前后端都是一致的通道即可。

socket.emit("chat message", msg.toUpperCase());
表示对这个"chat message"通道进行回复,我们暂时是对英文字母做大写处理并返回。

const express = require('express');const app = express();const http = require('http');const server = http.createServer(app);const { Server } = require("socket.io");const io = new Server(server);app.get('/', (req, res) => {    res.send('

Hello world

'); });app.get('/test', (req, res) => { res.sendFile(__dirname + '/index.html');});// io.on('connection', (socket) => {// console.log('a user connected');// });//by zhengkai.blog.csdn.net//处理socket.on信息并socket.emit回复信息//这里对接收到的msg做大写处理io.on('connection', (socket) => { //Socket.io by zhengkai.blog.csdn.net socket.on('chat message', (msg) => { console.log('received: ' + msg); socket.emit("chat message", msg.toUpperCase()); }); });//监听端口3000server.listen(3000, () => { console.log('listening on *:3000');});

index.html

这做一些样式处理,并且有以下body内容:

  • message的ul,可以用来追加li信息,显示记录往来

  • 一个form表单,用来提交要发送的信息

script部分而言,首先使用官方的socket.io 的js client , 初始化一个连接,添加监听事件:

  • 输入非空内容提交后,发送信息给websocket后台,同事也输出在信息列表

  • 接收到信息之后,显示在信息列表

      Socket.IO chat            

    感谢各位的阅读!关于"nodejs如何结合Socket.IO实现websocket即时通讯"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

    0