Charles Cooper

Charles Cooper

1664357121

MERN Stack Chat App with Socket.IO

MERN Stack with Socket.io Chat App for Beginners

MERN Stack Socket.io chat application for beginners with project include MERN = Nodejs with Expressjs, React with React Router, Mongodb with Mongoose and socket.io for websocket thing

🌟 Course Contents 🌟
⏳ (00:00:00) Intro to course
⏳ (00:04:02) Course Outline
⏳ (00:07:43) Setup Nodejs
⏳ (00:13:16) First socket connection
⏳ (00:20:35) React with socket.io
⏳ (00:30:33) Send and receive message
⏳ (00:42:18) Make Chat Working
⏳ (00:51:17) Chat box design
⏳ (01:00:00) Message box design
⏳ (01:09:43) Typing event
⏳ (01:22:34) React router
⏳ (01:38:24) Join room
⏳ (01:47:26) Room chat
⏳ (01:57:53) Best practice Clean Code
⏳ (02:08:48) Dynamic room
⏳ (02:20:41) Rooms on MongoDB
⏳ (02:37:19) Dummy user
⏳ (02:45:25) Remove room
⏳ (03:00:07) File sharing

Source Code: https://github.com/bitfumes/mern-stack-socket-chat

#mern #socketio #mongodb #expressjs #node #react 

MERN Stack Chat App with Socket.IO
Lawrence  Lesch

Lawrence Lesch

1664330820

Socket.io: Realtime Application Framework (Node.JS Server)

socket.io

Features

Socket.IO enables real-time bidirectional event-based communication. It consists of:

Some implementations in other languages are also available:

Its main features are:

Reliability

Connections are established even in the presence of:

  • proxies and load balancers.
  • personal firewall and antivirus software.

For this purpose, it relies on Engine.IO, which first establishes a long-polling connection, then tries to upgrade to better transports that are "tested" on the side, like WebSocket. Please see the Goals section for more information.

Auto-reconnection support

Unless instructed otherwise a disconnected client will try to reconnect forever, until the server is available again. Please see the available reconnection options here.

Disconnection detection

A heartbeat mechanism is implemented at the Engine.IO level, allowing both the server and the client to know when the other one is not responding anymore.

That functionality is achieved with timers set on both the server and the client, with timeout values (the pingInterval and pingTimeout parameters) shared during the connection handshake. Those timers require any subsequent client calls to be directed to the same server, hence the sticky-session requirement when using multiples nodes.

Binary support

Any serializable data structures can be emitted, including:

Simple and convenient API

Sample code:

io.on('connection', socket => {
  socket.emit('request', /* … */); // emit an event to the socket
  io.emit('broadcast', /* … */); // emit an event to all connected sockets
  socket.on('reply', () => { /* … */ }); // listen to the event
});

Cross-browser

Browser support is tested in Sauce Labs:

Sauce Test Status

Multiplexing support

In order to create separation of concerns within your application (for example per module, or based on permissions), Socket.IO allows you to create several Namespaces, which will act as separate communication channels but will share the same underlying connection.

Room support

Within each Namespace, you can define arbitrary channels, called Rooms, that sockets can join and leave. You can then broadcast to any given room, reaching every socket that has joined it.

This is a useful feature to send notifications to a group of users, or to a given user connected on several devices for example.

Note: Socket.IO is not a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the ack id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server (like ws://echo.websocket.org) either. Please see the protocol specification here.

Installation

// with npm
npm install socket.io

// with yarn
yarn add socket.io

How to use

The following example attaches socket.io to a plain Node.JS HTTP server listening on port 3000.

const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', client => {
  client.on('event', data => { /* … */ });
  client.on('disconnect', () => { /* … */ });
});
server.listen(3000);

Standalone

const io = require('socket.io')();
io.on('connection', client => { ... });
io.listen(3000);

Module syntax

import { Server } from "socket.io";
const io = new Server(server);
io.listen(3000);

In conjunction with Express

Starting with 3.0, express applications have become request handler functions that you pass to http or http Server instances. You need to pass the Server to socket.io, and not the express application function. Also make sure to call .listen on the server, not the app.

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

In conjunction with Koa

Like Express.JS, Koa works by exposing an application as a request handler function, but only by calling the callback method.

const app = require('koa')();
const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

In conjunction with Fastify

To integrate Socket.io in your Fastify application you just need to register fastify-socket.io plugin. It will create a decorator called io.

const app = require('fastify')();
app.register(require('fastify-socket.io'));
app.io.on('connection', () => { /* … */ });
app.listen(3000);

Documentation

Please see the documentation here.

The source code of the website can be found here. Contributions are welcome!

Debug / logging

Socket.IO is powered by debug. In order to see all the debug output, run your app with the environment variable DEBUG including the desired scope.

To see the output from all of Socket.IO's debugging scopes you can use:

DEBUG=socket.io* node myapp

Testing

npm test

This runs the gulp task test. By default the test will be run with the source code in lib directory.

Set the environmental variable TEST_VERSION to compat to test the transpiled es5-compat version of the code.

The gulp task test will always transpile the source code into es5 and export to dist first before running the test.

Download Details:

Author: Socketio
Source Code: https://github.com/socketio/socket.io/ 
License: MIT license

#javascript #node #socketio 

Socket.io: Realtime Application Framework (Node.JS Server)
Coding  Life

Coding Life

1662012886

Chat App with Angular, Node.js and Socket.IO

How to build a chat application with Angular, Node js and Socket.IO

In this tutorial, we are going to build a real-time chat application using Angular 10, Node js, and the socket.io library. We will use local storage to store all chats, so that whenever a user wants to see messages which he/she has communicated with saved contacts.

What is Web Socket?
WebSocket is the internet protocol that allows for full-duplex communication between a server and clients. This protocol goes beyond the typical HTTP request and response paradigm. With WebSocket, the server may send data to a client without the client initiating a request, thus allowing for some very interesting applications.

Some external libraries have been used in this tutorial and below are the details for those libraries:-

In Backend:
1. socket.io:- https://www.npmjs.com/package/socket.io 
2. @types/socket.io:- https://www.npmjs.com/package/@types/socket.io 

In Frontend:
1. bootstrap:- https://www.npmjs.com/package/bootstrap/v/4.5.0
2. @ng-bootstrap/ng-bootstrap:- https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap/v/8.0.0
3. @angular/localize (required, if an angular version is greater or equal to 9):- https://www.npmjs.com/package/@angular/localize
4. socket.io-client:- https://www.npmjs.com/package/socket.io-client
5. @types/socket.io-client:- https://www.npmjs.com/package/@types/socket.io-client

Below is the source code repository link
https://github.com/the-swag-coder/chat-application-angular-socket.git 

Subscribe: https://www.youtube.com/c/TheSwagCoder/featured 

#angular #nodejs #socketio 

Chat App with Angular, Node.js and Socket.IO
Code  JS

Code JS

1662006977

Realtime Chat App In React.js and Node.js | Socket.io Tutorial

Build A Realtime Chat App In ReactJS and NodeJS | Socket.io Tutorial | Create Chat App Using ReactJs

In this video I am going to built a socket.io real time chat app that uses NodeJs and ExpressJs in backend, and ReactJs and bootstrap in frontend.
This project is a messaging app that sends and receives messages to all the users in the selected chat room. First the user submit his/her name and select the favourable room he/she wants to message in. Then on sending the message, the message is delivered to all the user in the room in real time.
This project is a simple demonstration of live chatting app .

⏱ Timestamps
0:00 Intro
02:13  NodeJs Code Started 
09:48  ReactJs Code started 
12:41  Bootstrap In ReactJs 
19:49  ReactJs Component MainForm.jsx 
37:12  ReactJs Component ChatRoom.jsx 
01:00:18  Connection Socket.io FE & BE connection

 Frontend - ReactJs, HTML, CSS, JavaScript, Bootstrap
  Backend - NodeJs, ExpressJs, Socket.IO

PROJECT LIVE URL -  https://chat-socket-io-prince.herokuapp.com/
 

=============================================================

Useful Link In Building A Realtime Chat App In ReactJS and NodeJS :-

✨Project git repo BE (localhost) - https://github.com/PrinceRaaaj/chat-socket.IO-BE
✨Project git repo FE (localhost) - https://github.com/PrinceRaaaj/chat-socket.IO-FE
✨Bootstrap page - https://getbootstrap.com/docs/5.1/getting-started/introduction/
✨Bootstrap CDN - https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
✨React-Router-Dom - https://www.npmjs.com/package/react-router-dom
✨Bootstrap Send Icon - https://icons.getbootstrap.com/icons/send/
✨React-Moment - https://www.npmjs.com/package/react-moment
✨Nodemon - https://www.npmjs.com/package/nodemon
✨Socket.Io Cheatsheet - https://socket.io/docs/v3/emit-cheatsheet/

Subscribe : https://www.youtube.com/channel/UCwQOndlLaoNIqdVlOF87jSA/featured 
 

#chatapp  #socketio  #reactjs #nodejs 

Realtime Chat App In React.js and Node.js | Socket.io Tutorial
Dang  Tu

Dang Tu

1659037080

Cách Hiển Thị Dữ Liệu Thời Gian Thực Với Vue, Node, Socket.io

Socket thường tốt nhất cho truyền dữ liệu thời gian thực giữa máy khách và máy chủ. Chúng rất có lợi so với các API REST, đặc biệt là đối với các trò chơi trực tuyến. Chúng giúp người dùng tương tác với trò chơi của họ và gửi dữ liệu của họ đến máy chủ, sau đó máy chủ chuyển tiếp dữ liệu này đến những người chơi khác trong trò chơi.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách hiển thị dữ liệu thời gian thực qua máy chủ và cách sử dụng các ổ cắm. Chúng tôi sẽ tạo một trò chơi khối rất đơn giản bằng cách sử dụng Vue.Js, Node.Js và Socket.io . Chúng tôi đang sử dụng Socket.io qua các API REST vì chúng tôi cần dữ liệu thời gian thực, dữ liệu này chỉ có thể phân phối qua các socket. Trò chơi này sẽ không quá khó; tất cả những gì chúng ta sẽ làm là kết xuất các đối tượng 2D bằng cách sử dụng canvas HTML và tương tác với chúng thông qua các ứng dụng khách khác nhau, như trong hình bên dưới. Nhấp vào các nút di chuyển khối cho tất cả người chơi. Sẽ có nhiều thành phần khác nhau tham gia vào hướng dẫn này.

1

Bắt đầu ở phía máy chủ

Chúng tôi sẽ bắt đầu với thành phần phía máy chủ, sau đó đi thẳng vào thành phần ứng dụng khách Vue.js sau đó. Tôi hiểu rằng bạn đã cài đặt Node.js. Tạo một thư mục cho phía máy chủ và điều hướng đến thư mục của bạn và nhập thông tin sau

nnpm init -y
touch index.js

Nếu lệnh cảm ứng dường như không hoạt động đối với bạn, bạn có thể tạo tệp index.js theo cách thủ công bên trong thư mục. Điều này tạo ra một package.json sẽ mang tất cả các phụ thuộc mà chúng tôi sẽ áp dụng trong suốt hướng dẫn này trong máy chủ. Trước khi tiếp tục, chúng tôi sẽ cài đặt một số gói chúng tôi cần cho dự án này. Chúng tôi sẽ cần gói gật đầu và chúng tôi cần cấu hình nó. Sau đó, chúng tôi sẽ yêu cầu khung nhanh và gói socket.io .

npm install express socket.io --save 
npm install nodemon --save-dev

Bây giờ chúng ta sẽ tập trung vào tệp index.js của mình và nhanh chóng thiết lập mọi thứ. Chúng tôi sẽ theo dõi vị trí của người chơi và chúng tôi sẽ lưu trữ phía máy chủ vị trí của người chơi. (Điều này có nghĩa là khi máy chủ khởi động lại, nó sẽ kết thúc tất cả dữ liệu của chúng ta, điều này là tốt cho hướng dẫn này.) Vì vậy, trong index.js, tôi sẽ tạo một đối tượng có tên positionđể lưu trữ các giá trị x và y.

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http, {
  cors: {
    origin: "*",
  },
});

//inputting our position values 
let position = {
  x: 200,
  y: 200,
};

//listening to a PORT 
Http.listen(3000, () => {
  console.log("Server up and running...");
});

Toàn bộ logic đằng sau những gì sẽ xảy ra ở đây là máy khách Vue sẽ không bao giờ kiểm soát vị trí của người chơi của chúng tôi: tất cả sẽ được xác định ở phía máy chủ. Máy chủ sẽ phát các vị trí cho tất cả các máy khách và họ sẽ chỉ hiển thị các vị trí trên màn hình. Máy khách sẽ yêu cầu máy chủ di chuyển và máy chủ sẽ thay đổi vị trí. Chúng tôi sẽ không thực hiện bất kỳ thay đổi trực tiếp nào từ cấp độ khách hàng; tất cả sẽ phụ thuộc vào máy chủ, điều này sẽ giúp ngăn người dùng gian lận và giả mạo vị trí của người chơi.

Chúng tôi sẽ làm một điều nữa trước khi chúng tôi rời khỏi thành phần máy chủ, nhưng chúng tôi vẫn chưa hoàn thành nó; chúng tôi sẽ trở lại nó. Chúng ta sẽ lắng nghe một sự kiện cụ thể, như được thấy bên dưới.

let position = {
  x: 200,
  y: 200,
};

Socketio.on("connection", (socket) => {
  socket.emit("position", position);
});

Kết nối ở trên là một loại nhãn dành riêng cho thư, vì vậy mỗi khi máy khách kết nối với máy chủ, nó sẽ kích hoạt sự kiện kết nối. Chúng tôi sẽ phát ra một thông báo cụ thể tới ổ cắm cụ thể vừa kết nối và thông báo đó sẽ chứa các vị trí giá trị x và y.

Phía khách hàng

Chúng ta sẽ tạm nghỉ ở phía máy chủ và đi vào thành phần Vue. Giả sử bạn đã cài đặt Vue CLI , chúng ta có thể tạo một dự án Vue mới và đặt tên cho dự án đó.

vue create client

Chúng ta cũng cần cài đặt socket.io như đã làm trước đó cho thành phần máy chủ. Sau khi cài đặt, nhanh chóng đổi tên tệp trong srcthư mục thành App.vue và tệp Hello-world trong thư mục thành phần thành BlockGame.vue.

2

Khi bạn đã thay đổi tên tệp thành công, việc tiếp theo chúng ta phải làm là thiết lập tệp App.vue. Điều hướng đến App.vue và xóa nội dung ban đầu của thẻ mẫu và thẻ kiểu, nhập tệp blockgame vào thẻ script và đặt đối tượng thành phần thành BlockGame. Nhập thành phần BlockGame trong thẻ mẫu được bao bọc trong một div. Tệp App.vue của bạn sẽ trông như thế này:

<template>
  //calling the BlockGame to the template tag
  <div id="app">
    <BlockGame />
  </div>
</template>

<script>
//importing the BlockGame component into the app file 
import BlockGame from "./components/BlockGame.vue";
export default {
  name: "app",
  components: {
    BlockGame,
  },
};
</script>
<style></style>

Sau khi thiết lập tệp App.vue, chúng ta vào tệp BlockGame trong thư mục thành phần và thiết lập nó. Sau đó, chúng tôi sẽ thêm một canvas trong thẻ div và đặt cho nó một tên tham chiếu (trò chơi) vì trong Vue, bạn không thể chỉ truy cập các thành phần DOM bằng querySelectors; bạn phải sử dụng tài liệu tham khảo. Chúng tôi sẽ thêm thông tin về chiều rộng, chiều cao và đường viền để bạn có thể dễ dàng xem canvas bao gồm những gì. Bây giờ bên trong tập lệnh của chúng tôi, chúng tôi sẽ cần nhập socket.io mà chúng tôi đã tải xuống trước đó và sau đó khai báo một vài biến bên trong đối tượng lớp, bao gồm đối tượng kết nối socket, hiện sẽ trống. Chúng tôi thêm một đối tượng ngữ cảnh và một đối tượng vị trí bao gồm một giá trị x và y để chúng tôi không gặp phải dữ liệu rỗng trôi nổi.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>
<script>
//importing the socket.io we installed
import io from "socket.io-client"; 
export default {
  name: "BlockGame",
  data() {
    return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
};
</script>
<style scoped></style>

Bây giờ chúng tôi có tùy chọn kết nối với máy chủ của mình và sau đó chúng tôi có tùy chọn lắng nghe các sự kiện và phát hành các sự kiện. Đầu tiên, chúng ta cần thiết lập một kết nối, điều này được thực hiện tốt nhất trong vòng đời hook đã tạo cho Vue trước khi Vue hiển thị. Chúng tôi sẽ phải chỉ định máy chủ của chúng tôi cho các ổ cắm mà chúng tôi đã xác định, được thực hiện trong phương thức đã tạo .

Khi Vue hiển thị, chúng tôi muốn bắt đầu lắng nghe các sự kiện. Chúng tôi muốn bắt đầu làm việc cùng với canvas của chúng tôi. Để làm điều này, chúng tôi sẽ phải sử dụng sự kiện vòng đời được gắn kết và sau đó, lấy đối tượng ngữ cảnh và sau đó thêm một số tham chiếu (2d) vào nó. Điều này sẽ thêm một hộp vuông trống lớn ở phía bên trái của trang web của bạn. Bước tiếp theo là vẽ một hình chữ nhật bên trong hộp hình vuông trống, đặt vị trí của nó và đặt kích thước cho nó. Chúng tôi sẽ sử dụng 20 x 20 pixel cho kích thước của khối hình chữ nhật, điều này sẽ tạo ra một khối hình chữ nhật nhỏ màu đen ở đầu bên trái của hộp hình vuông.

Phát lại phiên nguồn mở

OpenReplay là một bộ mã nguồn mở, phát lại phiên cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay được tự lưu trữ để kiểm soát toàn bộ dữ liệu của bạn.

replayer.png

Start enjoying your debugging experience - start using OpenReplay for free.

Listening for messages

Bây giờ chúng ta đã có các hộp và đã khởi tạo vị trí của chúng, chúng ta cần lắng nghe các thông điệp. Vì vậy, giống như chúng ta đã làm đối với phía máy chủ, chúng ta sẽ gọi socket.on để lắng nghe vị trí mà chúng ta đã phát ra từ tệp index.js. Chúng tôi sẽ thêm một đối tượng dữ liệu sẽ mang khối chữ nhật của chúng tôi trong đó, nhưng nó sẽ không hiển thị cho đến khi chúng tôi lấy lại vị trí từ ứng dụng. Để giải quyết điều đó, chúng ta sẽ khởi tạo vị trí thành dữ liệu. Nếu bạn truy cập vào trình duyệt web của mình, bạn sẽ thấy rằng khối hình chữ nhật đã di chuyển do các vị trí giá trị x và y (200, 200) mà chúng tôi đặt trong tệp index.js của chúng tôi. Chúng tôi sẽ nhận được các vị trí khác nhau theo thời gian, và vì vậy, chúng tôi phải đặt canvas của chúng tôi để xóa theo từng khoảng thời gian. Bước tiếp theo là làm cho hình chữ nhật di chuyển. Để làm được điều đó, bạn phảitạo một phương thức và đặt một đối tượng chuyển động sẽ phát ra hai thứ, tên nhãn và chỉ đường. Hiện tại, nếu bạn truy cập trang web của mình và thử di chuyển nó, hình chữ nhật sẽ không di chuyển, nhưng đừng lo lắng, chúng tôi vẫn chưa thực hiện xong.

return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  //the created lifecycle hook
  created() {
  //connecting to our host  
    this.socket = io("http://localhost:3000");
  },
  //the mounted lifecycle hook
  mounted() {
    //creating the 2d canvas
    this.context = this.$refs.game.getContext("2d");
    this.socket.on("position", (data) => {
      this.position = data;
      //clearing the rectangular block at intervals
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );
      //creating a rectangular block sized 20x20
      this.context.fillRect(this.position.x, this.position.y, 20, 20);
    });
  },
  //creating a method to emit the directions to the server side
  methods: {
    move(direction) {
      this.socket.emit("move", direction);
    },
  },
};
</script>
<style scoped></style>

Tiếp theo, chúng ta cần tạo một vài nút trong div mẫu của chúng ta để sử dụng phương pháp chúng ta đã tạo. Bên trong các nút này, chúng tôi sẽ thêm một trình nghe onclick, đặt tên cho nó là di chuyển, chuyển theo một hướng, sau đó đóng thẻ và thực hiện tương tự cho các nút còn lại. Sau khi hoàn tất, chúng ta sẽ có một nút lên, xuống, trái và phải trong trình duyệt web.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
  <!--create a p tag to format the button properly in your browser--> 
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>

Vì vậy, bây giờ, hãy quay lại index.js của chúng tôi và bắt đầu lập kế hoạch lắng nghe các chỉ dẫn. Đi vào bên trong kết nối ổ cắm và thiết lập một socket.on mới để lắng nghe các thông báo di chuyển và tạo một đối tượng dữ liệu có thể lưu giữ các sự kiện chuyển đổi khác nhau. Trong trường hợp đầu tiên (bên trái), đặt vị trí x bằng -5, và sau đó socketio phát ra vị trí. Quan sát rằng chúng tôi đã sử dụng socketio thay vì chỉ socket vì socket phát ra chỉ cho một máy khách cụ thể trong khi socketio phát cho tất cả các máy khách được kết nối, sau đó phá vỡ trường hợp. Bạn cũng phải làm như vậy đối với các trường hợp còn lại; bên phải có vị trí x là +5, bên phải có vị trí y là -5 và cuối cùng, bên dưới phải có vị trí y là +5 kèm theo phát ra socketio của chúng để phát ra các vị trí này và sau đó ngắt để kết thúc các trường hợp.

//connection to emit the positions to all connected clients 
Socketio.on("connection", (socket) => {
  socket.emit("position", position);
//connection to the move buttons and method to send back conditions to perform 
  socket.on("move", (data) => {
    switch (data) {
      case "left":
        position.x -= 5;
        Socketio.emit("position", position);
        break;
      case "right":
        position.x += 5;
        Socketio.emit("position", position);
        break;
      case "up":
        position.y -= 5;
        Socketio.emit("position", position);
        break;
      case "down":
        position.y += 5;
        Socketio.emit("position", position);
        break;
    }
  });
});

Nếu bạn truy cập vào trình duyệt của mình và nhấp vào bất kỳ nút nào, bạn sẽ quan sát thấy hình chữ nhật sẽ di chuyển theo hướng đã nhấp đó. Máy khách hiện đang nhận các vị trí mà chúng tôi đã đặt trước đó trong máy chủ và sau đó phát chúng tới trình duyệt để thực hiện tất cả các chuyển động khác nhau.

3

Sự kết luận

Đây là một ví dụ điển hình về việc sử dụng socket.io và Vue.js. Đó là một ví dụ tốt hơn là chỉ sử dụng máy chủ trò chuyện thông thường mà mọi người đều làm! Trò chơi này khá đơn giản vì nó không có góc cạnh tranh; tất cả những gì chúng tôi đã làm là tạo một máy chủ với Node.js và một máy khách với Vue.js. Máy chủ gửi thông tin vị trí đến máy khách và máy khách sử dụng thông tin này để hiển thị khung vẽ 2D trên màn hình của bạn, có nghĩa là bây giờ chúng tôi có một thành phần trò chơi cho phần này và chúng tôi đang sử dụng nó như thể nó là một máy chủ trò chơi. Đó là một ví dụ tuyệt vời về việc sử dụng socket với vue.js và node.js.

Git repo: https://github.com/christofa/2d-Blockgame.git

Liên kết: https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #node #socketio #javascript 

Cách Hiển Thị Dữ Liệu Thời Gian Thực Với Vue, Node, Socket.io
Callum  Owen

Callum Owen

1659026220

How to Render Real-time Data with Vue, Node, Socket.io

Sockets are usually best for real-time data communications between clients and servers. They are very beneficial over REST APIs, especially for online games. They help users interact with their game and send their data to the server, and then the server forwards this data to other players in the game.

In this tutorial, I will show you how to render real-time data over the server and how sockets are used. We will create a very simple block game using Vue.Js, Node.Js, and Socket.io. We are using Socket.io over REST APIs because we need real-time data, which is only deliverable over sockets. This game isn’t going to be very hardcore; all we will do is render 2D objects using an HTML canvas, and interact with them through various clients, as seen in the image below. Clicking on the buttons moves the block for all players. There will be various components involved in this tutorial.

See more at: https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#node #vue #socketio 

How to Render Real-time Data with Vue, Node, Socket.io
Thierry  Perret

Thierry Perret

1659011710

Comment Rendre Des Données En Temps Réel Avec Vue, Node, Socket.io

Les sockets sont généralement les meilleurs pour les communications de données en temps réel entre les clients et les serveurs. Ils sont très avantageux par rapport aux API REST, en particulier pour les jeux en ligne. Ils aident les utilisateurs à interagir avec leur jeu et à envoyer leurs données au serveur, puis le serveur transmet ces données aux autres joueurs du jeu.

Dans ce didacticiel, je vais vous montrer comment rendre des données en temps réel sur le serveur et comment les sockets sont utilisés. Nous allons créer un jeu de blocs très simple en utilisant Vue.Js, Node.Js et Socket.io . Nous utilisons Socket.io sur les API REST car nous avons besoin de données en temps réel, qui ne sont livrables que sur des sockets. Ce jeu ne va pas être très hardcore ; tout ce que nous ferons est de rendre des objets 2D à l'aide d'un canevas HTML et d'interagir avec eux via divers clients, comme le montre l'image ci-dessous. Cliquer sur les boutons déplace le bloc pour tous les joueurs. Il y aura divers composants impliqués dans ce tutoriel.

première

Débuter côté serveur

Nous allons commencer par le composant côté serveur, puis passer directement au composant client Vue.js par la suite. Je suppose que vous avez installé Node.js. Créez un répertoire pour le côté serveur et accédez à votre répertoire, puis saisissez ce qui suit

nnpm init -y
touch index.js

Si la commande touch ne semble pas fonctionner de votre côté, vous pouvez créer manuellement un fichier index.js dans le répertoire. Cela crée un package.json qui portera toutes les dépendances que nous appliquerons tout au long de ce didacticiel au sein du serveur. Avant de poursuivre, nous allons installer certains packages dont nous aurions besoin pour ce projet. Nous aurons besoin du package nodemon et nous devons le configurer. Ensuite, nous aurons besoin du framework express et du package socket.io .

npm install express socket.io --save 
npm install nodemon --save-dev

Nous allons maintenant nous concentrer sur notre fichier index.js et configurer rapidement les choses. Nous allons suivre la position d'un joueur et nous allons stocker la position de notre joueur côté serveur. (Cela signifie que lorsque le serveur redémarre, il met fin à toutes nos données, ce qui est OK pour ce tutoriel.) Donc, dans le index.js, je vais créer un objet nommé positionpour stocker les valeurs x et y.

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http, {
  cors: {
    origin: "*",
  },
});

//inputting our position values 
let position = {
  x: 200,
  y: 200,
};

//listening to a PORT 
Http.listen(3000, () => {
  console.log("Server up and running...");
});

The whole logic behind what will happen here is that the Vue client will never be in control of our player’s position: it will all be determined server-side. The server will broadcast the positions to all the clients, and they will just display the positions on the screen. The client will request the server to move, and the latter will change the position. We will not make any direct changes from the client level; it will all depend on the server, which would help prevent users from cheating and spoofing player positions.

We will do one more thing before we leave the server component, but we are not done with it just yet; we will return to it. We are going to listen for a particular event, as seen below.

let position = {
  x: 200,
  y: 200,
};

Socketio.on("connection", (socket) => {
  socket.emit("position", position);
});

La connexion ci-dessus est un type réservé d'étiquette pour les messages, donc chaque fois qu'un client se connecte au serveur, il déclenchera l'événement de connexion. Nous émettrons un message particulier à cette socket particulière qui vient de se connecter, et ce message contiendra les positions des valeurs x et y.

Le côté client

Nous allons faire une pause côté serveur et nous diriger vers le composant Vue. En supposant que vous avez installé Vue CLI , nous pouvons créer un nouveau projet Vue et lui donner le nom du projet.

vue create client

Nous devons également installer socket.io comme nous l'avons fait précédemment pour le composant serveur. Après l'installation, renommez rapidement le fichier dans le srcdossier en App.vue et le fichier Hello-world dans le dossier des composants en BlockGame.vue.

2

Une fois que vous avez réussi à modifier les noms de fichiers, la prochaine chose que nous devons faire est de configurer le fichier App.vue. Accédez à App.vue et supprimez le contenu initial de la balise de modèle et de la balise de style, importez le fichier blockgame dans la balise de script et définissez l'objet composant sur BlockGame. Saisissez le composant BlockGame dans la balise de modèle entourée d'un div. Votre fichier App.vue devrait ressembler à ceci :

<template>
  //calling the BlockGame to the template tag
  <div id="app">
    <BlockGame />
  </div>
</template>

<script>
//importing the BlockGame component into the app file 
import BlockGame from "./components/BlockGame.vue";
export default {
  name: "app",
  components: {
    BlockGame,
  },
};
</script>
<style></style>

Après avoir configuré le fichier App.vue, nous nous dirigeons vers notre fichier BlockGame dans le dossier des composants et le configurons. Ensuite, nous ajouterons un canevas dans la balise div et lui donnerons un nom de référence (jeu) car dans Vue, vous ne pouvez pas simplement accéder aux composants DOM avec des querySelectors ; vous devez utiliser des références. Nous ajouterons des informations sur la largeur, la hauteur et la bordure afin que vous puissiez facilement voir en quoi consiste le canevas. Maintenant, dans notre script, nous aurions besoin d'importer le socket.io que nous avons téléchargé plus tôt, puis de déclarer quelques variables à l'intérieur de l'objet de classe, y compris l'objet de connexion socket, qui serait vide pour le moment. Nous ajoutons un objet de contexte et un objet de position composé d'une valeur x et y afin de ne pas rencontrer de données nulles flottantes.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>
<script>
//importing the socket.io we installed
import io from "socket.io-client"; 
export default {
  name: "BlockGame",
  data() {
    return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
};
</script>
<style scoped></style>

Nous avons maintenant la possibilité de nous connecter à notre serveur, puis nous avons la possibilité d'écouter les événements et d'émettre des événements. Tout d'abord, nous devons établir une connexion, ce qui est mieux fait dans le crochet de cycle de vie créé pour Vue avant le rendu de Vue. Nous aurions à spécifier notre hôte pour les sockets que nous avons définis, ce qui est fait dans la méthode created .

Une fois le rendu de Vue, nous voulons commencer à écouter les événements. Nous voulons commencer à travailler aux côtés de notre toile. Pour ce faire, nous devrions utiliser l' événement de cycle de vie monté, puis saisir l'objet de contexte, puis y ajouter des références (2d). Cela ajouterait une grande boîte carrée vide sur le côté gauche de votre page Web. L'étape suivante consiste à dessiner un rectangle à l'intérieur de la boîte carrée vide, à définir sa position et à lui donner une taille. Nous utiliserons 20 par 20 pixels pour la taille du bloc rectangulaire, ce qui devrait créer un petit bloc noir rectangulaire à l'extrémité gauche de la boîte carrée.

Relecture de session open source

OpenReplay est une suite de relecture de session open source qui vous permet de voir ce que font les utilisateurs sur votre application Web, vous aidant à résoudre les problèmes plus rapidement. OpenReplay est auto-hébergé pour un contrôle total sur vos données.

replayer.png

Commencez à profiter de votre expérience de débogage - commencez à utiliser OpenReplay gratuitement .

A l'écoute des messages

Maintenant que nous avons les boîtes et que nous avons initialisé leur position, nous devons écouter les messages. Donc, tout comme nous l'avons fait pour le côté serveur, nous appellerons le socket.on pour écouter la position que nous avons émise à partir du fichier index.js. Nous ajouterons un objet de données qui contiendra notre bloc rectangulaire, mais il ne sera pas rendu tant que nous n'aurons pas récupéré une position de l'application. Pour résoudre cela, nous allons initialiser la position aux données. Si vous accédez à votre navigateur Web, vous remarquerez que le bloc rectangulaire s'est déplacé en raison des positions des valeurs x et y (200, 200) que nous avons définies dans notre fichier index.js. Nous recevrons des positions différentes de temps en temps, et à cause de cela, nous devons régler notre toile pour qu'elle soit claire à chaque intervalle. L'étape suivante consiste à faire bouger le rectangle. Pour ce faire, vous devezcréez une méthode et définissez un objet en mouvement qui émettrait deux choses, le nom de l'étiquette et les directions. Pour l'instant, si vous accédez à votre page Web et essayez de la déplacer, le rectangle ne bougera pas, mais ne vous inquiétez pas, nous n'avons pas encore terminé.

return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  //the created lifecycle hook
  created() {
  //connecting to our host  
    this.socket = io("http://localhost:3000");
  },
  //the mounted lifecycle hook
  mounted() {
    //creating the 2d canvas
    this.context = this.$refs.game.getContext("2d");
    this.socket.on("position", (data) => {
      this.position = data;
      //clearing the rectangular block at intervals
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );
      //creating a rectangular block sized 20x20
      this.context.fillRect(this.position.x, this.position.y, 20, 20);
    });
  },
  //creating a method to emit the directions to the server side
  methods: {
    move(direction) {
      this.socket.emit("move", direction);
    },
  },
};
</script>
<style scoped></style>

Ensuite, nous devons créer quelques boutons dans notre modèle div pour utiliser la méthode que nous avons créée. À l'intérieur de ces boutons, nous allons ajouter un écouteur onclick, le nommer move, passer dans une direction, puis fermer la balise et faire de même pour le reste des boutons. Une fois cela fait, nous devrions avoir un bouton haut, bas, gauche et droite dans le navigateur Web.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
  <!--create a p tag to format the button properly in your browser--> 
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>

Alors maintenant, revenons à notre index.js et commençons à planifier d'écouter les instructions. Rendez-vous à l'intérieur de la connexion des sockets et configurez un nouveau socket.on pour écouter les messages de déplacement et créer un objet de données qui contiendrait différents événements de commutation. Dans le premier cas (à gauche), réglez la position x sur -5, puis le socketio émet la position. Observez que nous avons utilisé socketio au lieu de simplement socket car les sockets émettent uniquement vers un client particulier tandis que socketio émet vers tous les clients connectés, puis casse la casse. Vous devez faire la même chose pour le reste des cas; le droit devrait avoir une position x de +5, le haut devrait avoir la position y de -5, et enfin, le bas devrait avoir la position y de +5 accompagné de leur socketio émettre pour émettre ces positions puis casser pour terminer le cas.

//connection to emit the positions to all connected clients 
Socketio.on("connection", (socket) => {
  socket.emit("position", position);
//connection to the move buttons and method to send back conditions to perform 
  socket.on("move", (data) => {
    switch (data) {
      case "left":
        position.x -= 5;
        Socketio.emit("position", position);
        break;
      case "right":
        position.x += 5;
        Socketio.emit("position", position);
        break;
      case "up":
        position.y -= 5;
        Socketio.emit("position", position);
        break;
      case "down":
        position.y += 5;
        Socketio.emit("position", position);
        break;
    }
  });
});

Si vous vous dirigez vers votre navigateur et cliquez sur l'un des boutons, vous observerez que le rectangle se déplacera dans la direction sur laquelle vous avez cliqué. Le client reçoit maintenant les positions que nous avons définies précédemment dans le serveur, puis les diffuse au navigateur pour effectuer tous les différents mouvements.

3

Conclusion

Ceci est un bon exemple d'utilisation de socket.io et Vue.js. C'est un meilleur exemple que de simplement faire le serveur de chat typique que tout le monde fait ! Ce jeu est assez simple car il n'a pas d'angle de compétition ; tout ce que nous avons fait a été de créer un serveur avec Node.js et un client avec Vue.js. Le serveur envoie des informations de position au client, et le client utilise ces informations pour afficher le canevas 2D sur votre écran, ce qui signifie que nous avons maintenant un composant de jeu pour cela, et nous l'utilisons comme s'il s'agissait d'un serveur de jeu. C'est un excellent exemple d'utilisation de sockets avec vue.js et node.js.

Dépôt Git : https://github.com/christofa/2d-Blockgame.git

Lien : https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #node #socketio #javascript 

Comment Rendre Des Données En Temps Réel Avec Vue, Node, Socket.io

Рендеринг данных в реальном времени с помощью Vue, Node, Socket.io

Сокеты обычно лучше всего подходят для передачи данных в режиме реального времени между клиентами и серверами. Они очень выгодны по сравнению с REST API, особенно для онлайн-игр. Они помогают пользователям взаимодействовать с их игрой и отправляют свои данные на сервер, а затем сервер пересылает эти данные другим игрокам в игре.

В этом руководстве я покажу вам, как отображать данные в реальном времени на сервере и как используются сокеты. Мы создадим очень простую блочную игру, используя Vue.Js, Node.Js и Socket.io . Мы используем Socket.io вместо REST API, потому что нам нужны данные в реальном времени, которые доставляются только через сокеты. Эта игра не будет очень хардкорной; все, что мы будем делать, — это рендерить 2D-объекты с помощью холста HTML и взаимодействовать с ними через различные клиенты, как показано на изображении ниже. Нажатие на кнопки перемещает блок для всех игроков. В этом уроке будут задействованы различные компоненты.

первый

Начало работы на стороне сервера

Мы начнем с серверного компонента, а затем сразу перейдем к клиентскому компоненту Vue.js. Я так понимаю , у вас установлен Node.js. Создайте каталог для серверной части и перейдите в свой каталог и введите следующее

nnpm init -y
touch index.js

Если команда touch не работает с вашей стороны, вы можете создать файл index.js вручную внутри каталога. Это создает package.json , который будет содержать все зависимости, которые мы будем применять в этом руководстве на сервере. Прежде чем мы продолжим, мы установим некоторые пакеты, которые нам понадобятся для этого проекта. Нам понадобится пакет nodemon , и нам нужно его настроить. Затем нам потребуется экспресс - фреймворк и пакет socket.io .

npm install express socket.io --save 
npm install nodemon --save-dev

Теперь мы сосредоточимся на нашем файле index.js и быстро настроим его. Мы будем отслеживать позицию игрока и будем хранить позицию нашего игрока на стороне сервера. (Это означает, что когда сервер перезагружается, он завершает все наши данные, что нормально для этого руководства.) Итак, в index.js я создам объект с именем positionдля хранения значений x и y.

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http, {
  cors: {
    origin: "*",
  },
});

//inputting our position values 
let position = {
  x: 200,
  y: 200,
};

//listening to a PORT 
Http.listen(3000, () => {
  console.log("Server up and running...");
});

Вся логика того, что здесь произойдет, заключается в том, что клиент Vue никогда не будет контролировать позицию нашего игрока: все это будет определяться на стороне сервера. Сервер будет транслировать позиции всем клиентам, а они просто будут отображать позиции на экране. Клиент попросит сервер переместиться, и последний изменит позицию. Мы не будем вносить никаких прямых изменений с уровня клиента; все будет зависеть от сервера, который поможет предотвратить мошенничество пользователей и подмену позиций игроков.

Прежде чем покинуть серверный компонент, мы сделаем еще кое-что, но мы еще не закончили с ним; мы вернемся к нему. Мы собираемся прослушивать определенное событие, как показано ниже.

let position = {
  x: 200,
  y: 200,
};

Socketio.on("connection", (socket) => {
  socket.emit("position", position);
});

Приведенное выше соединение является зарезервированным типом метки для сообщений, поэтому каждый раз, когда клиент подключается к серверу, это вызывает событие соединения. Мы отправим конкретное сообщение в этот конкретный сокет, который только что подключился, и это сообщение будет содержать позиции значений x и y.

Сторона клиента

Мы сделаем перерыв со стороны сервера и перейдем к компоненту Vue. Предполагая, что у вас установлен Vue CLI , мы можем создать новый проект Vue и дать ему имя проекта.

vue create client

Нам также необходимо установить socket.io , как мы это делали ранее для серверного компонента. После установки быстро переименуйте файл в srcпапке в App.vue и файл Hello-world в папке компонентов в BlockGame.vue.

2

После того, как вы успешно изменили имена файлов, нам нужно настроить файл App.vue. Перейдите к App.vue и удалите начальное содержимое тега шаблона и тега стиля, импортируйте файл blockgame в тег script и задайте для объекта компонента значение BlockGame. Введите компонент BlockGame в тег шаблона, заключенный в div. Ваш файл App.vue должен выглядеть так:

<template>
  //calling the BlockGame to the template tag
  <div id="app">
    <BlockGame />
  </div>
</template>

<script>
//importing the BlockGame component into the app file 
import BlockGame from "./components/BlockGame.vue";
export default {
  name: "app",
  components: {
    BlockGame,
  },
};
</script>
<style></style>

После настройки файла App.vue мы переходим к нашему файлу BlockGame в папке компонента и настраиваем его. Затем мы добавим холст в тег div и дадим ему ссылочное имя (игра), потому что во Vue вы не можете просто получить доступ к компонентам DOM с помощью querySelectors; вы должны использовать ссылки. Мы добавим информацию о ширине, высоте и границах, чтобы вы могли легко увидеть, из чего состоит холст. Теперь внутри нашего скрипта нам нужно будет импортировать socket.io , который мы загрузили ранее, а затем объявить несколько переменных внутри объекта класса, включая объект подключения к сокету, который в данный момент будет пустым. Мы добавляем объект контекста и объект положения, состоящий из значений x и y, поэтому мы не сталкиваемся с нулевыми данными, плавающими вокруг.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>
<script>
//importing the socket.io we installed
import io from "socket.io-client"; 
export default {
  name: "BlockGame",
  data() {
    return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
};
</script>
<style scoped></style>

Теперь у нас есть возможность подключиться к нашему серверу, а затем у нас есть возможность прослушивать события и выдавать события. Во-первых, нам нужно установить соединение, что лучше всего сделать в созданном обработчике жизненного цикла для Vue до рендеринга Vue. Нам нужно будет указать наш хост для определенных нами сокетов, что делается в созданном методе .

После рендеринга Vue мы хотим начать слушать события. Мы хотим начать работать вместе с нашим холстом. Для этого нам пришлось бы использовать событие жизненного цикла монтирования, а затем получить объект контекста, а затем добавить к нему несколько ссылок (2d). Это добавит большое пустое квадратное поле в левую часть вашей веб-страницы. Следующий шаг — нарисовать прямоугольник внутри пустого квадратного блока, установить его положение и задать размер. Мы будем использовать 20 на 20 пикселей для размера прямоугольного блока, который должен создать небольшой прямоугольный черный блок в левом конце квадратного блока.

Повтор сеанса с открытым исходным кодом

OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая быстрее устранять неполадки. OpenReplay размещается самостоятельно для полного контроля над вашими данными.

реплейсер.png

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно .

Прослушивание сообщений

Теперь, когда у нас есть ящики и инициализировано их положение, нам нужно прослушивать сообщения. Итак, как и для серверной стороны, мы будем вызывать socket.on для прослушивания позиции, которую мы выдали из файла index.js. Мы добавим объект данных, который будет нести в себе наш прямоугольный блок, но он не будет отображаться, пока мы не получим обратно позицию из приложения. Чтобы решить эту проблему, мы собираемся инициализировать позицию данными. Если вы зайдете в свой веб-браузер, вы заметите, что прямоугольный блок сместился из-за позиций значений x и y (200, 200), которые мы установили в нашем файле index.js. Время от времени мы будем получать разные позиции, и из-за этого мы должны настроить наш холст на очистку на каждом интервале. Следующий шаг — заставить прямоугольник двигаться. Для этого вам нужносоздайте метод и установите движущийся объект, который будет излучать две вещи: имя метки и направления. На данный момент, если вы зайдете на свою веб-страницу и попытаетесь переместить ее, прямоугольник не сдвинется, но не беспокойтесь, мы еще не закончили.

return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  //the created lifecycle hook
  created() {
  //connecting to our host  
    this.socket = io("http://localhost:3000");
  },
  //the mounted lifecycle hook
  mounted() {
    //creating the 2d canvas
    this.context = this.$refs.game.getContext("2d");
    this.socket.on("position", (data) => {
      this.position = data;
      //clearing the rectangular block at intervals
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );
      //creating a rectangular block sized 20x20
      this.context.fillRect(this.position.x, this.position.y, 20, 20);
    });
  },
  //creating a method to emit the directions to the server side
  methods: {
    move(direction) {
      this.socket.emit("move", direction);
    },
  },
};
</script>
<style scoped></style>

Далее нам нужно создать пару кнопок в нашем шаблоне div, чтобы использовать созданный нами метод. Внутри этих кнопок мы добавим прослушиватель onclick, назовем его move, передаем в направлении, а затем закроем тег и проделаем то же самое для остальных кнопок. После этого у нас должны появиться кнопки вверх, вниз, влево и вправо в веб-браузере.

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
  <!--create a p tag to format the button properly in your browser--> 
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>

Итак, теперь давайте вернемся к нашему index.js и начнем слушать указания. Войдите в соединение сокетов и настройте новый socket.on для прослушивания сообщений о перемещении и создайте объект данных, который будет содержать различные события переключения. В первом случае (слева) установите позицию x равной -5, а затем socketio выдаст позицию. Обратите внимание, что мы использовали socketio вместо простого сокета, потому что сокеты отправляются только определенному клиенту, в то время как socketio посылается всем подключенным клиентам, а затем нарушает регистр. Вы должны сделать то же самое для остальных случаев; правая сторона должна иметь позицию x, равную +5, верхняя должна иметь позицию y, равную -5, и, наконец, нижняя часть должна иметь позицию y, равную +5, в сопровождении их сокетио, испускающих эти позиции, а затем перерыв, чтобы закончить случаи.

//connection to emit the positions to all connected clients 
Socketio.on("connection", (socket) => {
  socket.emit("position", position);
//connection to the move buttons and method to send back conditions to perform 
  socket.on("move", (data) => {
    switch (data) {
      case "left":
        position.x -= 5;
        Socketio.emit("position", position);
        break;
      case "right":
        position.x += 5;
        Socketio.emit("position", position);
        break;
      case "up":
        position.y -= 5;
        Socketio.emit("position", position);
        break;
      case "down":
        position.y += 5;
        Socketio.emit("position", position);
        break;
    }
  });
});

Если вы зайдете в свой браузер и нажмете любую из кнопок, вы увидите, что прямоугольник будет двигаться в этом направлении. Теперь клиент получает позиции, которые мы установили ранее на сервере, а затем транслирует их в браузер для выполнения различных движений.

3

Вывод

Это хороший пример использования socket.io и Vue.js. Это лучший пример, чем обычный чат-сервер, который делают все! Эта игра довольно проста, потому что в ней нет соперничества; все, что мы сделали, это создали сервер с Node.js и клиент с Vue.js. Сервер отправляет информацию о позиции клиенту, и клиент использует эту информацию для рендеринга 2D-холста на вашем экране, что означает, что теперь у нас есть игровой компонент, и мы используем его, как если бы это был игровой сервер. Это отличный пример использования сокетов с vue.js и node.js.

Git-репозиторий: https://github.com/christofa/2d-Blockgame.git

Ссылка: https://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #node #socketio #javascript 

Рендеринг данных в реальном времени с помощью Vue, Node, Socket.io
田辺  亮介

田辺 亮介

1658989983

如何使用 Vue、Node、Socket.io 渲染實時數據

套接字通常最適合客戶端和服務器之間的實時數據通信。它們比 REST API 非常有用,尤其是對於在線遊戲。它們幫助用戶與他們的遊戲進行交互並將他們的數據發送到服務器,然後服務器將這些數據轉發給遊戲中的其他玩家。

在本教程中,我將向您展示如何在服務器上呈現實時數據以及如何使用套接字。我們將使用 Vue.Js、Node.Js 和Socket.io創建一個非常簡單的積木遊戲。我們在 REST API 上使用Socket.io,因為我們需要實時數據,這些數據只能通過套接字傳遞。這個遊戲不會太硬核;我們要做的就是使用 HTML 畫布渲染 2D 對象,並通過各種客戶端與它們進行交互,如下圖所示。點擊按鈕為所有玩家移動方塊。本教程將涉及各種組件。

第一的

服務器端入門

我們將從服務器端組件開始,然後直接進入 Vue.js 客戶端組件。我認為您已經安裝了Node.js。為服務器端創建一個目錄並導航到您的目錄,然後輸入以下內容

nnpm init -y
touch index.js

如果 touch 命令似乎對您不起作用,您可以在目錄中手動創建一個 index.js 文件。這將創建一個package.json,它將攜帶我們將在本教程中應用的所有依賴項。在我們繼續之前,我們將安裝這個項目需要的一些包。我們將需要nodemon包,並且需要對其進行配置。然後我們需要express框架和socket.io包。

npm install express socket.io --save 
npm install nodemon --save-dev

我們現在將專注於我們的 index.js 文件并快速進行設置。我們將跟踪玩家的位置,並將我們的玩家位置存儲在服務器端。(這意味著當服務器重新啟動時,它會終止我們所有的數據,這對於本教程來說是可以的。)所以在 index.js 中,我將創建一個名為的對象position來存儲 x 和 y 值。

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http, {
  cors: {
    origin: "*",
  },
});

//inputting our position values 
let position = {
  x: 200,
  y: 200,
};

//listening to a PORT 
Http.listen(3000, () => {
  console.log("Server up and running...");
});

這裡發生的事情背後的整個邏輯是 Vue 客戶端永遠不會控制我們玩家的位置:這一切都將在服務器端確定。服務器會將位置廣播給所有客戶端,它們只會在屏幕上顯示位置。客戶端會請求服務器移動,服務器會改變位置。我們不會從客戶層面進行任何直接更改;這一切都取決於服務器,這將有助於防止用戶作弊和欺騙玩家位置。

在我們離開服務器組件之前,我們還會做一件事,但我們還沒有完成它;我們將回到它。我們將監聽一個特定的事件,如下所示。

let position = {
  x: 200,
  y: 200,
};

Socketio.on("connection", (socket) => {
  socket.emit("position", position);
});

上面的連接是為消息保留的一種標籤,所以每次客戶端連接到服務器時,都會觸發連接事件。我們將向剛剛連接的特定套接字發出特定消息,該消息將包含 x 和 y 值位置。

客戶端

我們將從服務器端休息一下,進入 Vue 組件。假設您安裝了Vue CLI,我們可以創建一個新的 Vue 項目並為其命名。

vue create client

我們還需要像之前為服務器組件所做的那樣安裝 socket.io 。安裝完成後,快速將文件src夾中的文件重命名為App.vue,將components文件夾中的Hello-world文件重命名為BlockGame.vue。

2

成功更改文件名後,接下來我們要做的就是設置 App.vue 文件。導航到 App.vue 並移除模板標籤和样式標籤的初始內容,將塊遊戲文件導入腳本標籤,並將組件對象設置為 BlockGame。在 div 中包裹的模板標籤中輸入 BlockGame 組件。您的 App.vue 文件應如下所示:

<template>
  //calling the BlockGame to the template tag
  <div id="app">
    <BlockGame />
  </div>
</template>

<script>
//importing the BlockGame component into the app file 
import BlockGame from "./components/BlockGame.vue";
export default {
  name: "app",
  components: {
    BlockGame,
  },
};
</script>
<style></style>

設置 App.vue 文件後,我們進入組件文件夾中的 BlockGame 文件並進行設置。然後我們將在 div 標籤中添加一個畫布並給它一個引用名稱(遊戲),因為在 Vue 中你不能只使用 querySelectors 訪問 DOM 組件;你必須使用參考。我們將添加寬度、高度和邊框信息,以便您可以輕鬆查看畫布的組成部分。現在在我們的腳本中,我們需要導入我們之前下載的socket.io,然後在類對像中聲明一些變量,包括套接字連接對象,此時它是空的。我們添加了一個上下文對象和一個由 x 和 y 值組成的位置對象,因此我們不會遇到空數據浮動。

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>
<script>
//importing the socket.io we installed
import io from "socket.io-client"; 
export default {
  name: "BlockGame",
  data() {
    return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
};
</script>
<style scoped></style>

我們現在可以選擇連接到我們的服務器,然後我們可以選擇監聽事件和發布事件。首先,我們需要建立一個連接,這最好在 Vue 渲染之前在 Vue 的 created 生命週期鉤子中完成。我們必須為我們定義的套接字指定我們的主機,這是在created 方法中完成的。

一旦 Vue 呈現,我們就想開始監聽事件。我們想開始在我們的畫布旁邊工作。為此,我們必須使用已掛載的生命週期事件,然後獲取上下文對象,然後向其添加一些引用 (2d)。這將在您的網頁左側添加一個大的空方框。下一步是在空方盒子內畫一個矩形,設置它的位置,並給它一個大小。我們將使用 20 x 20 像素作為矩形塊的大小,這應該在方形框的左端創建一個小的矩形黑色塊。

開源會話重播

OpenReplay是一個開源的會話重播套件,可讓您查看用戶在您的 Web 應用程序上所做的事情,從而幫助您更快地解決問題。OpenReplay 是自託管的,可以完全控制您的數據。

重播.png

開始享受您的調試體驗 -開始免費使用 OpenReplay

收聽消息

現在我們有了盒子並初始化了它們的位置,我們需要監聽消息。所以就像我們在服務器端所做的那樣,我們將調用socket.on來監聽我們從 index.js 文件中發出的位置。我們將添加一個數據對象,該對象將在其中攜帶我們的矩形塊,但在我們從應用程序返回位置之前它不會渲染。為了解決這個問題,我們將把位置初始化為數據。如果您進入 Web 瀏覽器,您會觀察到矩形塊已經移動,因為我們在 index.js 文件中設置了 x 和 y 值位置(200、200)。我們會不時收到不同的位置,因此,我們必須將畫佈設置為在每個間隔上清除。下一步是使矩形移動。為此,您必須創建一個方法並設置一個移動對象,它會發出兩個東西,標籤名稱和方向。現在,如果您進入網頁並嘗試移動它,矩形不會移動,但不用擔心,我們還沒有完成。

return {
      socket: {},
      context: {},
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  //the created lifecycle hook
  created() {
  //connecting to our host  
    this.socket = io("http://localhost:3000");
  },
  //the mounted lifecycle hook
  mounted() {
    //creating the 2d canvas
    this.context = this.$refs.game.getContext("2d");
    this.socket.on("position", (data) => {
      this.position = data;
      //clearing the rectangular block at intervals
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );
      //creating a rectangular block sized 20x20
      this.context.fillRect(this.position.x, this.position.y, 20, 20);
    });
  },
  //creating a method to emit the directions to the server side
  methods: {
    move(direction) {
      this.socket.emit("move", direction);
    },
  },
};
</script>
<style scoped></style>

接下來,我們需要在模板 div 中創建幾個按鈕來使用我們創建的方法。在這些按鈕中,我們將添加一個 onclick 偵聽器,將其命名為 move,傳遞一個方向,然後關閉標籤並對其餘按鈕執行相同操作。完成後,我們應該在 Web 瀏覽器中有一個向上、向下、向左和向右按鈕。

<template>
  <!-- creating the HTML canvas -->
  <div>
    <canvas ref="game" width="640" height="480" style="border: 1px solid black">
    </canvas>
  <!--create a p tag to format the button properly in your browser--> 
    <p>
      <button v-on:click="move('right')">Right</button>
      <button v-on:click="move('left')">Left</button>
      <button v-on:click="move('up')">Up</button>
      <button v-on:click="move('down')">Down</button>
    </p>
  </div>
</template>

所以現在,讓我們回到我們的 index.js 並開始計劃聽取指示。進入 sockets 連接並設置一個新的 socket.on 來監聽移動消息並創建一個數據對象來保存不同的開關事件。在第一種情況下(左),將位置 x 設置為 -5,然後 socketio 發出該位置。請注意,我們使用了 socketio 而不僅僅是 socket,因為 socket 只向特定的客戶端發出,而 socketio 向所有連接的客戶端發出,然後打破這種情況。對於其餘的情況,您要這樣做;右邊應該有 +5 的位置 x,向上應該有 -5 的位置 y,最後,向下應該有 +5 的位置 y 伴隨著他們的 socketio 發射來發射這些位置,然後中斷結束案例。

//connection to emit the positions to all connected clients 
Socketio.on("connection", (socket) => {
  socket.emit("position", position);
//connection to the move buttons and method to send back conditions to perform 
  socket.on("move", (data) => {
    switch (data) {
      case "left":
        position.x -= 5;
        Socketio.emit("position", position);
        break;
      case "right":
        position.x += 5;
        Socketio.emit("position", position);
        break;
      case "up":
        position.y -= 5;
        Socketio.emit("position", position);
        break;
      case "down":
        position.y += 5;
        Socketio.emit("position", position);
        break;
    }
  });
});

如果您進入瀏覽器並單擊任何按鈕,您將觀察到矩形將沿單擊的方向移動。客戶端現在正在接收我們之前在服務器中設置的位置,然後將它們廣播到瀏覽器以進行所有各種動作。

3

結論

這是使用socket.io和 Vue.js的一個很好的例子。這是一個比每個人都做的典型聊天服務器更好的例子!這個遊戲很簡單,因為它沒有競爭的角度;我們所做的只是用 Node.js 創建一個服務器,用 Vue.js 創建一個客戶端。服務器向客戶端發送位置信息,客戶端使用此信息在您的屏幕上渲染 2D 畫布,這意味著我們現在有一個遊戲組件,我們將其用作遊戲服務器。這是在 vue.js 和 node.js 中使用套接字的一個很好的例子。

Git 倉庫:https ://github.com/christofa/2d-Blockgame.git

鏈接:https ://blog.openreplay.com/rendering-real-time-data-with-vue-node-and-socket-io

#vue #node #socketio #javascript 

如何使用 Vue、Node、Socket.io 渲染實時數據
Flutter App

Flutter App

1658133787

Build a Group Chat App using Flutter and Socket.io From Scratch

In this video, we will going to develop a Group chat app using flutter and socket.io, it is purely beginner friendly. You will get to know about basic flutter widget and socket.io.

Subscribe: https://www.youtube.com/c/DevStack/featured 

#flutter #socketio  

Build a Group Chat App using Flutter and Socket.io From Scratch
Snippet Coder

Snippet Coder

1648807956

Location Tracking Using Flutter, NodeJS & Socket.io

Location Tracking Using Flutter, NodeJS & Socket.io

In this video we will learn how to track live location using Flutter, NodeJS and Socket.io. 

Video Link : https://youtu.be/adqoG5Y0DMA

#flutter #nodejs #socketio 

Location Tracking Using Flutter, NodeJS & Socket.io
React Dev

React Dev

1648086008

Build out the HTTP Socket server & React for the Frontend | Socket.io + ReactJS Tutorial

In this video We will be introducing the SocketIO Library in React. We will be using NodeJS and Express to build out the HTTP Socket server, and ReactJS for the frontend.

Timestamps 
00:00 | Intro
01:15 | Setting Up Socket Server
11:04 | Socket Io In React
27:23 | Socket IO Rooms

Code: https://github.com/machadop1407/socket-io-react-example 

Subscribe: https://www.youtube.com/c/PedroTechnologies/featured 

#reactjs  #socketio 

Build out the HTTP Socket server & React for the Frontend | Socket.io + ReactJS Tutorial
Sean Wade

Sean Wade

1642826845

Create a Secure Chat Application with Socket.IO and React

Ceate a Real-time Chat App using React, JavaScript and Socket.IO

This tutorial shows you how to create a real-time chat application using React, JavaScript, and Socket.IO.
 

Table of Contents:
00:00 - Hello developers!
01:03 - Install prerequisites
02:08 - Create a Chat Server with Express and Socket.IO
04:35 - Implement a Socket.IO Client Using React
08:36 - Add User Authentication with OpenID Connect
10:50 - Add Okta to the Socket.IO Chat Server
12:26 - Add Okta to the Socket.IO Client
15:50 - See it all working
17:12 - Dig deeper into WebSockets and JavaScript
17:36 - Thanks for watching!

Blog post: https://developer.okta.com/blog/2021/07/14/socket-io-react-tutorial 
GitHub repo: https://github.com/oktadev/okta-socket-io-chat-example 
Demo script: https://github.com/oktadev/okta-socket-io-chat-example/blob/main/demo.adoc 

#socketio #react #websocket #javascript

Create a Secure Chat Application with Socket.IO and React

Basic Docker Compose template application with Flask, Celery, Redis, MySQL, SocketIO, Nginx and Gunicorn

Nginx / Gunicorn / Flask 🐍 / Celery / SocketIO / MySQL / Redis / Docker 🐳 sample application

Basic Docker Compose template application for orchestating Flask with a Celery queue task, Redis message broker, MySQL database and support for SocketIO protocol.

Deployed with Nginx server and Gunicorn WSGI.

Flower supervision of Celery workers is also available. SocketIO is implemented through Flask-SocketIO.

Note that this application is almost production-ready. To see a production-ready application that follows this template check out CONTRABASS-webservices.

This template is intended for asynchronous tasks, periodical tasks and apps that require asynchronous communication through WebSockets-like protocols. Note that this makes an ideal backend for long-time execution web apps.

Notice that this application is horizontally scalable as it allows replication through multiple nginx, gunicorn, and celery workers.

Requirements

Run

First setup variables on .docker.env. Assuming you have Docker and docker-compose installed, run on terminal:

docker-compose up

In order to bring it down run:

docker-compose down

Go too:

http://127.0.0.1/hello/MyApplicationExample

Flower management page

Test

pytest -v

Maintainers

@alexOarga


Author: alexOarga
Source Code: https://github.com/alexOarga/docker-nginx-flask-celery-mysql-redis
License: MIT License

#flask #celery #redis #mysql #socketio #nginx #gunicorn #docker 

Basic Docker Compose template application with Flask, Celery, Redis, MySQL, SocketIO, Nginx and Gunicorn

Flask-SocketIO: Socket.IO integration for Flask Applications

Flask-SocketIO

Socket.IO integration for Flask applications.

Sponsors

The following organizations are funding this project:

Socket.IO
Socket.IO
Add your company here!

Many individual sponsors also support this project through small ongoing contributions. Why not join them?

Installation

You can install this package as usual with pip:

pip install flask-socketio

Example

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
    
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.event
def my_event(message):
    emit('my response', {'data': 'got it!'})

if __name__ == '__main__':
    socketio.run(app)

Resources

Download Details:
Author: miguelgrinberg
Source Code: https://github.com/miguelgrinberg/Flask-SocketIO
License: MIT License

#flask #python #socketio 

Flask-SocketIO: Socket.IO integration for Flask Applications