⚡ Node Websockets CRUD

• A Node.js app to Create, Read, Update and Delete (CRUD) todo cards using Websockets
• Tutorial code from Fazt with changes to code and styling
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Node Websockets CRUD
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General Info

• Socket.IO enables realtime, bi-directional communication between the client and server, with a client-side library that runs in the browser, and a server-side library for Node.js.
• uuid npm module provides each todo with a Universally Unique IDentifier (UUID) RN Namespace (doc. Number RF4122)
• The 16 octets of a UUID are represented as 32 hexadecimal (base-16) digits, displayed in five groups separated by hyphens, in the form 8-4-4-4-12 eg: "ee0a1fb5-fd31-4962-bf48-bdbe5dba1bd2"
• Bootstrap cards used with simple styling

📷 Screenshots

.

📶 Technologies

• Node.js v14 javascript runtime using the Chrome V8 engine.
• Babel v7 JS compiler
• Express v4 web framework for node
• Socket.io v4 to enable real-time bidirectional event-based communication.
• uuid v8 to create of RFC4122 UUIDs
• Bootstrap v5 front-end open source toolkit
• JSDoc @param tags used to provide the name, type, and description of a function parameter.
• ncp v2 asynchronous recursive file & directory copying

💾 Setup

• npm run dev to start a dev server on localhost:3000
• npm run build to create a build folder using Babel JS compiler
• npm start to run production version on http://localhost:3000

💻 Code Examples

• sockets.js websocket functions to create, read, update & delete todos.

export default (io) => {
	io.on('connection', (socket) => {
    console.log('user connected');

		// Send todos to all connected sockets
		socket.emit('server:loadtodos', todos);

    // add new todo to existing todos array using push operator
		socket.on('client:newtodo', (newTodo) => {
			const todo = { id: uuid(), ...newTodo  };
			todos.unshift(todo);
			io.emit('server:newtodo', todo);
		});

    // filter todos to remove todo with id matching delete command
    // then rerender todos
		socket.on('client:deletetodo', (todoId) => {
			todos = todos.filter((todo) => todo.id !== todoId);
			io.emit('server:loadtodos', todos);
		});

    // fetch todo to be edited using find function where ids match
		socket.on('client:gettodo', (todoId) => {
			const todo = todos.find((todo) => todo.id === todoId);
			socket.emit('server:selectedtodo', todo);
		});

    // update todo using new data for todo where ids match
		socket.on('client:updatetodo', (updatedTodo) => {
			todos = todos.map((todo) => {
				if (todo.id === updatedTodo.id) {
					todo.title = updatedTodo.title;
					todo.description = updatedTodo.description;
				}
				return todo;
			});
			io.emit('server:loadtodos', todos);
		});

		socket.on('disconnect', () => {
			console.log(socket.id, 'disconnected');
		});
	});
};

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Fazt Code: Nodejs Socketio CRUD in Spanish
• socket.io documentation

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com