大家好，又见面了，我是你们的朋友全栈君。
本篇将介绍如何快速、简便地使用 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");
});
然后在文件目录下运行
node index.js
然后在浏览器中打开 http://localhost:3000
然后使用 F12 打开控制台可以看到
前端已经输出了后端传过来的消息
再回到运行 nodejs 的终端
可以看到后端也接受到了前端传来的消息。
至此我们实现了使用 socketio 进行了前后端的 websocket 的交互。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/152202.html原文链接：https://javaforall.net
