web编程期末树莓派项目(四)——websocket实现聊天室

web编程期末树莓派项目(四)——websocket实现聊天室

  • 聊天室
    • 效果展示
    • websocket
    • 前端实现
      • 登陆页面
      • 聊天页面
    • 后端实现
      • 消息传输
      • 用户行为
      • 整体运行

聊天室

效果展示

  • 微型登陆页面
  • 聊天页面
  • 手机端显示

websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
web编程期末树莓派项目(四)——websocket实现聊天室_第1张图片

前端实现

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;

以此来显示用户身份、消息内容、消息发送时间
web编程期末树莓派项目(四)——websocket实现聊天室_第2张图片

用户行为

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}`));

你可能感兴趣的:(web编程)