Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthurvardevanyan/node_socket_autofill
https://github.com/arthurvardevanyan/node_socket_autofill
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/arthurvardevanyan/node_socket_autofill
- Owner: ArthurVardevanyan
- Created: 2021-12-08T23:09:09.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-29T23:31:15.000Z (over 2 years ago)
- Last Synced: 2023-03-04T15:13:05.127Z (almost 2 years ago)
- Language: JavaScript
- Size: 263 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Node_Socket_Autofill [](https://coveralls.io/github/ArthurVardevanyan/Node_Socket_Autofill?branch=master)
Build a functioning "auto-complete" application that suggests entities to a user that currently exist in a database, while the user is typing a new entry to potentially store in that database.
Write a web server with a front-end that Utilizes Websockets to pass messages back and forth with the back-end.
```javascript
# backend socket.js
# backend server.js
const io = require('socket.io')(http);
# frontend public/index.js
const socket = io();
```
Your GUI should have a single text box labeled "Name" which allows a user to type arbitrary text, and a button below the text box that is labeled "Submit".
If the user begins typing the same string immediately after submitting one, they should see their recently-created name in the list of auto-complete results.
- Delete Word added to delete inputted word if exists.
- Clear AutoFill added to Clear AutoFill History
While the user types arbitrary text into the text box, every keystroke will trigger a Websocket message to be sent to the back-end containing the entire text of the text box.
```javascript
# public/index.js
$(document).keyup('keypress', () => {
if (input.value) {
socket.emit('typingInput', input.value);
}
});
```
Use regular expressions to query MongoDB efficiently .
The back-end will query the database to find any existing record that contains the typed text **anywhere** in the "Name" property.
```javascript
# services/service.js
exports.getStartsWith = async (query) => {
const escaped = escapeStringRegexp(query);
const Regex = new RegExp(`^.*${escaped}`);
return Model.find({ Name: Regex }).select('-_id -__v');
};
```
Any matches to the text typed by the user should be sent back to the browser via Websocket message.
Displayed in a bullet-point list on the page.
- Opted to alternate row colors instead of bullet points.
```css
/* public/main.css*/
#messages > li:nth-child(even) {
background: #e6e6e6;
}
```
If the user clicks the "Submit" button, a new record should be created in the database with a "Name" property corresponding to the string the user specified, and should clear out the text box
```javascript
# services/service.js
exports.submit = async (str) => {
const sanitized = sanitize(str);
return new Model({ Name: sanitized }).save();
};
```
XSS vulnerability
```javascript
# frontend public/index.js
// https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/
const sanitizeHTML = (str) => {
const temp = document.createElement('div');
temp.textContent = str;
return temp.innerHTML;
};
# backend socket.js
const xss = require('xss');
# backend services/service.js
const escapeStringRegexp = require('escape-string-regexp');
const sanitize = require('mongo-sanitize');
```