| Урок за кутия за чат с Express |

Преди да започнем, трябва да имаме предвид, че преди да създадем това поле за чат, трябва да създадем начин, който ще попречи на потребителите да влизат със същото име или потребителско име. Това просто ще предотврати объркване и ще ни помогне да идентифицираме всеки потребител с уникално име.

Първата стъпка е да подготвим нашите възлови модули + файл sever.js:

анализатор на тялото
ejs
експрес
socket.io

— — server.js — —

// we will require these modules
var express = require("express");
var path = require("path");
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded());
// this will set up our static content
app.use(express.static(path.join(__dirname, "./static)));
// this will set up ejs + views folder
app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'ejs');
//this will tell express to listen on port 8000
var server = app.listen(8000, function() {
  console.log("listening on port 8000");
})
// this will load the routes file and pass the app + server into it
var route = require('./routes/index.js')(app, server);

В нашата статична папка трябва да имаме папка с javascript, която ще включва файл jquery.min.

go to https://jquery.com/download/
and Download the compressed, production jQuery 3.2.1

Нашите изгледи ще съдържат файл index.ejs.

(Моля, направете правилен отстъп, квадратчетата по-долу затрудняват отстъпа)

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>Group Chat Assignment</title>
    <script type="text/javascript" src="/javascript/jquery.min.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      var socket = io.connect();
      var current_user;
var new_user = function() {
        var name = prompt("Please enter your name to chat");
        socket.emit("page_load", {user: name});
      }
new_user();
socket.on("existing_user", function(data){
        $("#error").html(data.error)
        new_user();
      })
socket.on("load_messages", function(data){
        $("#error").html("") //resetting the error message
        current_user = data.current_user;
        var messages = data.messages;
        var messages_thread = "";
for (var i = 0; i < messages.length; i++){
          messages_thread += "<p>" + messages[i].name + ": " + messages[i].message + "</p>";
        }
$("#message_board").append(messages_thread);
      })
$("#new_message").submit(function(){
        socket.emit("new_message", {message: $("#message").val(), user: current_user})
        return false;
      })
socket.on("post_new_message", function(data) {
        $("#message_board").append("<p>" + data.user + ": " + data.new_message + "</p>");
      })
    })
</script>
  </head>
  <body>
    <div id="container">
      <div id="error"></div>
      <p>Conversation Board</p>
      <div id="message_board"></div>
      <form id="new_message">
        <input type="text" id="message" placeholder="enter your message here">
        <input type="submit" value="Send">
      </form>
    </div>  
  </body>
</html>

Във вашата папка с маршрути трябва да има файл index.js

var users = [];
var message = [];
var is_user = function(user) {
  var users_count = users.length;
  for (var i = 0; i < users_count; i++) {
    if (user == users[i]){
      return true;
    }
  }
  return false;
}
module.exports = function Route(app, server) {
  var io = require("socket.io").listen(server)
  io.sockets.on("connection", function(socket){
    socket.on("page_load", function(data){
      if(is_user(data.user) === true) {
        socket.emit("existing_user", {error: "user already exists"})
      }
        else {
        users.push(data.user);
        socket.emit("load_messages", {current_user: data.user, messages: messages})
      }
  })
  socket.on("new_message", function(data) {
    messages.push({name: data.user, message: data.message})
    io.emit("post_new_message", {new_message: data.message, user: data.user})
  })
})
  app.get("/", function(request, response){
    response.render("index")
  })
}

Щракнете тук, за да видите моето репо! https://github.com/chelsea-tang/chat_box

Забавлявай се! ~

| Урок за кутия за чат с Express |

Подобни въпроси