search

Hướng dẫn how do i connect socket.io to html? - làm cách nào để kết nối socket.io với html?

1 năms trước
Trả lời: 0
Lượt xem: 100

Trong hướng dẫn này, chúng tôi sẽ tạo một ứng dụng trò chuyện cơ bản. Nó hầu như không có kiến ​​thức cơ bản trước về Node.js hoặc Socket.io, vì vậy nó rất lý tưởng cho người dùng ở mọi cấp độ kiến ​​thức.

Show

Viết một ứng dụng trò chuyện với các ứng dụng web phổ biến các ngăn xếp như LAMP (PHP) thường rất khó. Nó liên quan đến việc bỏ phiếu cho máy chủ để thay đổi, theo dõi dấu thời gian và nó chậm hơn rất nhiều so với mức cần thiết.

Theo truyền thống, các ổ cắm là giải pháp xung quanh hầu hết các hệ thống trò chuyện thời gian thực đều được kiến ​​trúc, cung cấp kênh liên lạc hai chiều giữa máy khách và máy chủ.

Điều này có nghĩa là máy chủ có thể đẩy tin nhắn cho khách hàng. Bất cứ khi nào bạn viết một tin nhắn trò chuyện, ý tưởng là máy chủ sẽ nhận được nó và đẩy nó đến tất cả các máy khách được kết nối khác.

Mục tiêu đầu tiên là thiết lập một trang web HTML đơn giản để phục vụ biểu mẫu và danh sách các tin nhắn. Chúng tôi sẽ sử dụng khung web Node.js 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
4 cho đến cuối này. Đảm bảo Node.js được cài đặt.

Đầu tiên, hãy để tạo ra một tệp kê khai 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
5 mô tả dự án của chúng tôi. Tôi khuyên bạn nên đặt nó vào một thư mục trống chuyên dụng (Tôi sẽ gọi cho tôi 
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
6).

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

Bây giờ, để dễ dàng điền vào tài sản 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
7 với những thứ chúng tôi cần, chúng tôi sẽ sử dụng 
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
8:

Khi nó được cài đặt, chúng tôi có thể tạo một tệp 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
9 sẽ thiết lập ứng dụng của chúng tôi.

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

Điều này có nghĩa rằng:

  • Thể hiện khởi tạo 
    app.get('/', (req, res) => {
      res.sendFile(__dirname + '/index.html');
    });
    0 để trở thành một trình xử lý chức năng mà bạn có thể cung cấp cho máy chủ HTTP (như đã thấy trong dòng 4).
  • Chúng tôi xác định một trình xử lý tuyến đường 
    app.get('/', (req, res) => {
      res.sendFile(__dirname + '/index.html');
    });
    1 được gọi khi chúng tôi truy cập trang web của chúng tôi về nhà.
  • Chúng tôi làm cho máy chủ HTTP lắng nghe trên cổng 3000.

Nếu bạn chạy 

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
2, bạn sẽ thấy như sau:

Hướng dẫn how do i connect socket.io to html? - làm cách nào để kết nối socket.io với html?

Và nếu bạn trỏ trình duyệt của mình đến 

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
3:

Hướng dẫn how do i connect socket.io to html? - làm cách nào để kết nối socket.io với html?

Cho đến nay trong 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
9, chúng tôi đã gọi 
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
5 và chuyển nó một chuỗi HTML. Mã của chúng tôi sẽ rất khó hiểu nếu chúng tôi chỉ đặt toàn bộ ứng dụng của chúng tôi HTML ở đó, vì vậy thay vào đó chúng tôi sẽ tạo một tệp 
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
6 và thay vào đó phục vụ nó.

Thay vào đó, hãy để bộ tái cấu trúc con đường của chúng tôi để sử dụng 

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
7 thay thế.

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

Đặt những thứ sau trong tệp 

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
6 của bạn:

<!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</button>
    </form>
  </body>
</html>

Nếu bạn khởi động lại quy trình (bằng cách nhấn điều khiển+C và chạy lại 

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
2) và làm mới trang, nó sẽ trông như thế này:

Hướng dẫn how do i connect socket.io to html? - làm cách nào để kết nối socket.io với html?

Socket.io bao gồm hai phần:

  • Một máy chủ tích hợp với (hoặc gắn trên) socket node.js HTTP Server.io
  • Thư viện máy khách tải trên ổ cắm phía trình duyệt.io-client

Trong quá trình phát triển, 

<!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</button>
    </form>
  </body>
</html>
0 phục vụ khách hàng tự động cho chúng tôi, như chúng tôi sẽ thấy, vì vậy bây giờ chúng tôi chỉ phải cài đặt một mô -đun:

Điều đó sẽ cài đặt mô -đun và thêm phụ thuộc vào 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
5. Bây giờ, hãy để chỉnh sửa 
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
9 để thêm nó:

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

Lưu ý rằng tôi khởi tạo một thể hiện mới của 

<!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</button>
    </form>
  </body>
</html>
0 bằng cách chuyển đối tượng 
<!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</button>
    </form>
  </body>
</html>
4 (máy chủ HTTP). Sau đó, tôi lắng nghe sự kiện 
<!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</button>
    </form>
  </body>
</html>
5 cho các ổ cắm đến và đăng nhập nó vào bảng điều khiển.

Bây giờ trong index.html Thêm đoạn trích sau đây trước 

<!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</button>
    </form>
  </body>
</html>
6 (thẻ cơ thể kết thúc):

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

Đó là tất cả những gì cần thiết để tải 

<!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</button>
    </form>
  </body>
</html>
7, hiển thị toàn cầu 
<!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</button>
    </form>
  </body>
</html>
8 (và điểm cuối 
<!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</button>
    </form>
  </body>
</html>
9), sau đó kết nối.

Nếu bạn muốn sử dụng phiên bản cục bộ của tệp JS phía máy khách, bạn có thể tìm thấy nó tại 

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});
0.

Lưu ý rằng tôi không chỉ định bất kỳ URL nào khi tôi gọi 

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});
1, vì nó mặc định cố gắng kết nối với máy chủ phục vụ trang.

Nếu bây giờ bạn khởi động lại quy trình (bằng cách nhấn điều khiển+C và chạy lại 

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
2) và sau đó làm mới trang web, bạn sẽ thấy bảng điều khiển in một người dùng được kết nối.

Hãy thử mở một số tab và bạn sẽ thấy một số tin nhắn.

Hướng dẫn how do i connect socket.io to html? - làm cách nào để kết nối socket.io với html?

Mỗi ổ cắm cũng kích hoạt một sự kiện 

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});
3 đặc biệt:

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

Sau đó, nếu bạn làm mới một tab nhiều lần, bạn có thể thấy nó hoạt động.

Hướng dẫn how do i connect socket.io to html? - làm cách nào để kết nối socket.io với html?

Ý tưởng chính đằng sau Socket.io là bạn có thể gửi và nhận bất kỳ sự kiện nào bạn muốn, với bất kỳ dữ liệu nào bạn muốn. Bất kỳ đối tượng nào có thể được mã hóa như JSON sẽ làm và dữ liệu nhị phân cũng được hỗ trợ.

Hãy để Lừa làm cho nó để khi người dùng nhập tin nhắn, máy chủ sẽ nhận nó là một sự kiện 

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});
4. Phần 
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');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
5 trong 
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
6 bây giờ sẽ trông như sau:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });
</script>

Và trong 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
9, chúng tôi in ra sự kiện 
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');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
4:

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

Kết quả sẽ giống như video sau:

Mục tiêu tiếp theo là để chúng tôi phát ra sự kiện từ máy chủ đến phần còn lại của người dùng.

Để gửi một sự kiện cho tất cả mọi người, socket.io cung cấp cho chúng tôi phương thức 

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});
9.

io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' }); // This will emit the event to all connected sockets

Nếu bạn muốn gửi tin nhắn cho mọi người ngoại trừ một ổ cắm phát ra nhất định, chúng tôi có cờ 

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>
0 để phát ra từ ổ cắm đó:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
0

Trong trường hợp này, vì mục đích đơn giản, chúng tôi sẽ gửi tin nhắn cho mọi người, bao gồm cả người gửi.

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
1

Và về phía máy khách khi chúng tôi nắm bắt một sự kiện 

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});
4, chúng tôi sẽ đưa nó vào trang. Tổng số mã JavaScript phía máy khách hiện đang lên tới:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
2

Và điều đó hoàn thành ứng dụng trò chuyện của chúng tôi, trong khoảng 20 dòng mã! Đây là những gì nó trông giống như:

Dưới đây là một số ý tưởng để cải thiện ứng dụng:

  • Phát một thông báo cho người dùng được kết nối khi ai đó kết nối hoặc ngắt kết nối.
  • Thêm hỗ trợ cho biệt danh.
  • Don Tiết gửi cùng một tin nhắn cho người dùng đã gửi nó. Thay vào đó, hãy nối tin nhắn trực tiếp ngay khi anh ấy/cô ấy nhấn vào.
  • Thêm chức năng {user} đang gõ chức năng.
  • Cho thấy ai trực tuyến.
  • Thêm tin nhắn riêng tư.
  • Chia sẻ những cải tiến của bạn!

Bạn có thể tìm thấy nó trên GitHub ở đây.

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h2>Hello world</h2>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
3

Làm cách nào để liên kết một ổ cắm.io trong HTML?

Phần tập lệnh trong index.html bây giờ sẽ xem như sau:..
.
.
var socket = io () ;.
var form = tài liệu. getEuityByid ('Mẫu') ;.
var input = tài liệu. getEuityById ('đầu vào') ;.
hình thức. addEventListener ('gửi', hàm (e) {.
e. ngăn chặn Mặc định();.
if (input. value) {.

Làm cách nào để kết nối với máy chủ ổ cắm.io?

Nhập {Server} từ "socket.io" ;.
const io = máy chủ mới (3000) ;.
io.trên ("kết nối", (ổ cắm) => {.
// Gửi tin nhắn cho khách hàng ..
ổ cắm.phát ra ("Xin chào từ máy chủ", 1, "2", {3: bộ đệm. từ ([4])}) ;.
// Nhận tin nhắn từ khách hàng ..
ổ cắm.trên ("Xin chào từ máy khách", (... args) => {.

Socket.io sử dụng http?

js) và máy khách ổ cắm.io (trình duyệt, nút. JS hoặc ngôn ngữ lập trình khác) được thiết lập với kết nối WebSocket bất cứ khi nào có thể và sẽ sử dụng HTTP Long Polling dưới dạng dự phòng.will use HTTP long-polling as fallback.

Làm cách nào để kết nối socket.io với phía máy khách?

socket...
const socket = io ("http: // localhost") ;.
ổ cắm.trên ("Kết nối", () => {.
Bảng điều khiển.log (ổ cắm. kết nối);// thật..

programming html Socket io Socket io nodejs Socket-io Angular

Bài Viết Liên Quan

2023 Ford Tremor
2023 Ford Tremor

Hướng dẫn is php pre installed on windows? - php có được cài đặt sẵn trên windows không?
Hướng dẫn is php pre installed on windows? - php có được cài đặt sẵn trên windows không?

Xuất ma trận trong c++
Xuất ma trận trong c++

Hướng dẫn why does white space matter in python? - Tại sao không gian trắng lại có vấn đề trong python?
Hướng dẫn why does white space matter in python? - Tại sao không gian trắng lại có vấn đề trong python?

Hướng dẫn python replace text in file regex - python thay thế văn bản trong tệp regex
Hướng dẫn python replace text in file regex - python thay thế văn bản trong tệp regex

Hướng dẫn can you json encode an object in php? - bạn có thể mã hóa json một đối tượng trong php không?
Hướng dẫn can you json encode an object in php? - bạn có thể mã hóa json một đối tượng trong php không?

Cài song song hai hệ điều hành win va linux
Cài song song hai hệ điều hành win va linux

Các trường công lập xét tuyển học bạ 2023
Các trường công lập xét tuyển học bạ 2023

Hướng dẫn recursive function return none python - hàm đệ quy trả về không có python
Hướng dẫn recursive function return none python - hàm đệ quy trả về không có python

Hướng dẫn get value class javascript - lấy javascript lớp giá trị
Hướng dẫn get value class javascript - lấy javascript lớp giá trị

MỚI CẬP NHẬP

Giám đốc kinh doanh trong tiếng anh là gì năm 2024
12 phúts trước . bởi PsychoanalyticCassette
Mùi nào thơm nhất của bath and body work năm 2024
16 phúts trước . bởi ConvincedDoorstep
Bài tập 46 trang 20 sgk toán 8 năm 2024
43 phúts trước . bởi JumboGrappling
Bài tập hay và khó con lắc đơn năm 2024
1 giờs trước . bởi Man-madeMeasurement
Giải bài tập hóa học 8 bài 7 trang 11 năm 2024
1 giờs trước . bởi PuffingLineup
Nghiên cứu hồi cứu là gì năm 2024
1 giờs trước . bởi FloatingApparatus
Chất liệu văn học dân gian trong thương vợ năm 2024
1 giờs trước . bởi PharmaceuticalIrrigation
B2 là cấp bậc gì trong quân đội năm 2024
2 giờs trước . bởi Tax-freeCarcass
Lỗi bài hát mãi chỉ la giấc mơ năm 2024
2 giờs trước . bởi UsefulDepression
Bạn muốn hẹn hò văn cao hải phòng năm 2024
2 giờs trước . bởi KnottedBattery

Xem Nhiều

On the weekend là thì gì năm 2024
5 ngàys trước . bởi FierceCovering
Co số điện thoại di động nào 9 đó năm 2024
4 ngàys trước . bởi SilverTo-day
Himax premium lub ts40 là gì năm 2024
4 ngàys trước . bởi DeepeningMirth
81 2 nguyễn văn giai quận 1 f dakao năm 2024
4 ngàys trước . bởi First-rateMedics
Cách mạng công nghiệp 4.0 cơ hội nào cho startup năm 2024
1 ngàys trước . bởi SinfulBoldness
Các dạng toán chương 1 kinh tế vĩ mô năm 2024
8 giờs trước . bởi HeathenPolling
Cấu trúc tiếng anh là con nghiện của cái gì năm 2024
6 ngàys trước . bởi AspiringBooty
Hoạt động văn hóa văn nghệ là một năm 2024
5 ngàys trước . bởi OutdatedScenery
Khắc phục lỗi phần mềm fot làm bị out game năm 2024
3 ngàys trước . bởi OvercastOutfield
Top phim xuyen khong hay nhat trung quoc năm 2024
3 ngàys trước . bởi BlissfulAbstinence

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.