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

全栈程序员-站长 • 2022年6月22日上午6:36 • 未分类 • 阅读 21

大家好，又见面了，我是你们的朋友全栈君。

本篇将介绍如何快速、简便地使用 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>
  <body></body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    socket.emit("newChatMessage", "这是传送给后端的消息");

    socket.on("broadCastMessage", (msg) => { 
   
      console.log("这里输出后端返回的消息", msg);
      renderContent(msg);
    });
  </script>
</html>

index.js 文件中：
先使用 npm 安装库 socket.io express

npm install socket.io  express --save

var express = require("express");
var app = express();
var http = require("http").createServer(app);

var io = require("socket.io")(http);
app.get("/", (req, res) => { 
   
  res.sendFile(__dirname + "/index.html");
});

io.on("connection", (socket) => { 
   
  socket.on("newChatMessage", (msg) => { 
   
    console.log("message: " + msg);
    io.emit("broadCastMessage", "后端传过来的消息");
  });
});
http.listen(3000, () => { 
   
  console.log("listening on *:3000");
});