web编程期末树莓派项目（四）——websocket实现聊天室
web编程期末树莓派项目（四）——websocket实现聊天室
- 聊天室
-
- 效果展示
- websocket
- 前端实现
-
- 登陆页面
- 聊天页面
- 后端实现
-
- 消息传输
- 用户行为
- 整体运行
聊天室
效果展示
- 微型登陆页面
- 聊天页面
- 手机端显示
websocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
前端实现
html语句只能实现非常简单的页面，重点在于css的渲染
登陆页面
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>聊天室title>
head>
<body>
<div class="join-container">
<header class="join-header">
<h1><i class="fa fa-comments">i> 聊天室h1>
header>
<main class="join-main">
<form action="chat.html">
<div class="form-control">
<label for="username">账户label>
<input
type="text"
name="username"
id="username"
placeholder="输入用户名"
required
/>
div>
<div class="form-control">
<label for="room">房间label>
<select name="room" id="room">
<option value="philca的房间">philca的房间option>
select>
div>
<button type="submit" class="btn">加入聊天室button>
form>
main>
div>
body>
html>
聊天页面
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>聊天室title>
head>
<body>
<div class="chat-container">
<header class="chat-header">
<h1><i class="fa fa-globe">i> 聊天室h1>
<a id="leave-btn" class="btn">离开房间a>
header>
<main class="chat-main">
<div class="chat-sidebar">
<h3><i class="fas fa-comments">i> 房间名h3>
<h2 id="room-name">h2>
<h3><i class="fas fa-users">i> 用户h3>
<ul id="users">ul>
div>
<div class="chat-messages">div>
main>
<div class="chat-form-container">
<form id="chat-form">
<input
id="msg"
type="text"
placeholder="输入信息"
required
autocomplete="off"
/>
<button class="btn"><i class="fas fa-paper-plane">i> 发送button>
form>
div>
div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.2/qs.min.js"
integrity="sha256-TDxXjkAUay70ae/QJBEpGKkpVslXaHHayklIVglFRT4="
crossorigin="anonymous"
>script>
<script src="/socket.io/socket.io.js">script>
<script src="js/main.js">script>
body>
html>
后端实现
将后端分为几个模块
消息传输
const moment = require('moment');
function formatMessage(username, text) {
return {
username,
text,
time: moment().format('h:mm:ss a')
};
}
module.exports = formatMessage;
以此来显示用户身份、消息内容、消息发送时间
用户行为
const users = [];
function userJoin(id, username, room) {
const user = {
id, username, room };
users.push(user);
return user;
}
function getCurrentUser(id) {
return users.find(user => user.id === id);
}
function userLeave(id) {
const index = users.findIndex(user => user.id === id);
if (index !== -1) {
return users.splice(index, 1)[0];
}
}
function getRoomUsers(room) {
return users.filter(user => user.room === room);
}
module.exports = {
userJoin,
getCurrentUser,
userLeave,
getRoomUsers
};
用于判断用户加入的房间，加入房间、离开房间的行为
整体运行
需要引入socket.io模块，作用是实现服务器端与客户端的长连接
const socketio = require('socket.io');
规定在3000端口显示
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server running on port ${
PORT}`));