搭建socket聊天室
- 安装Node.js和npm
在本地机器上安装Node.js和npm,可以在Node.js官方网站上下载安装包进行安装。
- 创建项目文件夹
在命令行中进入你想要创建项目的目录,执行以下命令:
mkdir chatroom
cd chatroom
- 初始化项目
执行以下命令,初始化一个空的Node.js项目:
npm init -y
- 安装依赖包
执行以下命令安装所需的依赖包:
npm install express socket.io
- 创建服务器
在项目中创建一个名为server.js的文件,用于创建服务器和处理socket连接:
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.use(express.static(__dirname + '/public'));
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
- 创建客户端
在项目中创建一个名为index.html的文件,用于创建客户端页面和处理socket连接:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket.IO Chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
display: flex;
justify-content: center;
margin-top: 10px;
}
input[type="text"] {
width: 300px;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 16px;
background-color: #f6f6f6;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin: 5px 0;
}
label {
font-weight: bold;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<label for="message">Message:</label>
<input type="text" id="message" autocomplete="off">
<button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
const socket = io();
$('form').submit((e) => {
e.preventDefault();
const message = $('#message').val();
socket.emit('chat message', message);
$('#message').val('');
return false;
});
socket.on('chat message', (msg) => {
$('#messages').append($('<li>').text(msg));
});
});
</script>
</body>
</html>
- 运行服务器
在命令行中执行以下命令,启动Node.js服务器:
node server.js
- 打开客户端
在浏览器中打开 http://localhost:3000,即可访问聊天室页面。
- 开始聊天
在聊天框中输入消息,点击“Send”按钮或按下回车键发送消息。所有连接到服务器的客户端都将收到该消息。
以上就是一个简单的socket聊天室的搭建过程,你可以根据自己的需求进行扩展和优化
原文地址: http://www.cveoy.top/t/topic/ebcm 著作权归作者所有。请勿转载和采集!