创建一个目录 easy-chat-application。
在目录下执行命令 npm init -y。
然后下载 express 和 socket.io。
npm install express@4
npm install socket.io
index.js
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.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
// 监听来自客户端的 chat all 事件
socket.on('chat all', (msg) => {
// 向所有客户端发送消息
io.emit('chat all', msg);
});
// 监听来自客户端的 chat no name 事件
socket.on('chat no name', (msg) => {
// 向所有客户端发送消息，除了触发该 socket 的客户端
socket.broadcast.emit('chat no name', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send All</button>
</form>
<button id="noName">匿名发送</button>
</body>
<!--
<script src="/socket.io/socket.io.js"></script>为什么可以通过根路径引入socket.io.js呢
这是因为在 Node.js 中使用 Socket.io 库时，
它会在服务器启动时自动为客户端提供一个专门的 /socket.io/socket.io.js 路径，
以便客户端可以引用并连接到服务器上运行的 Socket.io 实例。
这个路径是通过服务器对象的 listen() 方法中的 serveClient 选项来启用的，
如果启用了该选项，
Socket.io 会在服务器上为客户端提供此路径。
因此，客户端可以通过在 HTML 页面中包含 <script src="/socket.io/socket.io.js"></script> 来获取客户端的 Socket.io 库文件，
而不需要知道其实际的物理路径。
这使得客户端可以轻松地与服务器建立连接并进行双向通信。
-->
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
var noNameButton = document.getElementById("noName")
noNameButton.addEventListener('click', function(e) {
if (input.value) {
socket.emit('chat no name', input.value);
input.value = '';
}
})
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat all', input.value);
input.value = '';
}
});
// 客户端监听来自服务端的 chat all 事件
socket.on('chat all', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
// 客户端监听来自服务端的 chat no name 事件
socket.on('chat no name', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</html>
之后在浏览器中打开多个 localhost:3000 窗口，就可以测试 socket 通信了。
有广播所有人的事件，也有广播除发送人外所有人的事件。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
