从零开始搭建 web 聊天室（一）

最新推荐文章于 2024-08-03 10:09:20 发布

一枚前端猿

最新推荐文章于 2024-08-03 10:09:20 发布

阅读量5.4k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_42535651/article/details/111460966

版权

本文档介绍如何利用socket.io库和express框架，不依赖前端框架，创建一个简单的web聊天室。通过实现前后端双向通信，展示websocket在实时交互场景的应用。提供了代码仓库链接及详细步骤，包括创建html和js文件，安装所需库，运行服务器并验证信息交互成功。

摘要由CSDN通过智能技术生成

本篇将介绍如何快速、简便地使用 socket.io 库搭建一个 web 在线聊天室。前端并没有使用任何框架。后端使用 express 框架搭建简易的后端。

socket.io 库本质上是基于 websocket 上进行封装。改变了以往只能前端发送请求，后端才能返回给前端信息，这样的一问一答形式。实现了前后端双向通信，即后端也可以主动 push 信息到前端。websocket 尤其适用于在线聊天或者实时交互的场景。已经广泛用于直播平台、视频平台等。

本篇实现：

最基本的前后端信息交互。

代码地址：

https://github.com/billmian/socketio-chat

技术栈：

前端 html + socketio
后端 express 框架

首先先创建 index.html 和 index.js 两个文件

index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <

最低0.47元/天解锁文章

一枚前端猿

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
4
评论
从零开始搭建 web 聊天室（一）

本篇将介绍如何快速、简便地使用 socket.io 库搭建一个 web 在线聊天室。前端并没有使用任何框架。后端使用 express 框架搭建简易的后端。socket.io 库本质上是基于 websocket 上进行封装。改变了以往只能前端发送请求，后端才能返回给前端信息，这样的一问一答形式。实现了前后端双向通信，即后端也可以主动 push 信息到前端。websocket 尤其适用于在线聊天或者实时交互的场景。已经广泛用于直播平台、视频平台等。本篇实现：最基本的前后端信息交互。代码地址：https
复制链接

扫一扫