#javascript #html #jquery #socket.io #mustache
#javascript #HTML #jquery #socket.io #усы
Вопрос:
Я работаю над приложением для чата, в котором пользователи могут отправлять сообщения друг другу. Я использовал библиотеку anchorme для обнаружения ссылок / URL-адресов / электронных писем в тексте и преобразования их в интерактивный HTML, что она и делает. Но обнаруженные URL-адреса не доступны для просмотра, они просто преобразуются в обычный
текст. Есть ли способ преобразовать его в гиперссылку?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.min.css">
</head>
<body>
<div class="chat">
<div id="sidebar" class="chat__sidebar">
</div>
<div class="chat__main">
<div id="messages" class="chat__messages"></div>
<div class="compose">
<form id="message-form">
<input name="msg" placeholder="Message" required autocomplete="off">
<button>Send message</button>
</form>
<button id="send-location">Send location</button>
</div>
</div>
</div>
<script id="message-template" type="text/html">
<div class="message">
<p>
<span class="message__name">{{username}}</span>
<span class="message__meta">{{createdAt}}</span>
</p>
<p>{{message}}</p>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/chat.js"></script>
<script src="https://raw.githack.com/alexcorvi/anchorme.js/gh-pages/dist/browser/anchorme.min.js"></script>
</body>
</html>
Клиентская часть Javascript:
const socket = io()
//Elements
const msg = document.querySelector('#message-form')
const messageFormInput = msg.querySelector('input')
const messageFormButton = msg.querySelector('button')
//Templates
const messages = document.querySelector("#messages")
const messageTemplate = document.querySelector('#message-template').innerHTML
//ref to index.js
socket.on('message', (message) => {
const html = Mustache.render(messageTemplate, {
//will come from the value
username: message.username,
message: message.text,
createdAt: moment(message.createdAt).format('HH:mm')
})
messages.insertAdjacentHTML('beforeend', html)
scrollAuto()
})
//Refers to html form input
msg.addEventListener('submit', (e) => {
//Prevents browser to update
e.preventDefault()
messageFormButton.setAttribute('disabled', 'disabled')
const message = e.target.elements.msg.value
socket.emit('sendMsg', message, (error) => {
messageFormButton.removeAttribute('disabled')
messageFormInput.value = ''
messageFormInput.focus()
//Enable after event acknowledged
if (error) {
return console.log(error)
}
})
})
socket.emit('join', {
username,
room
}, (error) => {
if (error) {
alert(error)
location.href = '/'
}
})
Сервер Javascript:
const path = require('path')
const http = require('http')
const express = require('express')
const socketio = require('socket.io')
//Destructuring
const {
generateMessage,
} = require('./utils/messages')
// Convert Urls
const anchorme = require("anchorme").default;
// Check for profanity
const Filter = require('bad-words')
//Initiate socket-io
const io = socketio(server)
// Define path for Express config
const publicDirectoryPath = path.join(__dirname, '../public')
app.use(express.static(publicDirectoryPath))
//Server-side
io.on('connection', (socket) => {
console.log(' WebSocket Connection')
// Listening for socket i.e messages
socket.on('sendMsg', (message, callback) => {
const user = getUser(socket.id)
var result = anchorme(message, {
attributes: [{
name: "target",
value: "_blank"
}, ]
});
console.log(result)
var filter = new Filter()
if (filter.isProfane(message)) {
return callback('Profanity is not allowed')
}
io.to(user.room).emit('message', generateMessage(user.username, result))
callback()
})
})
const generateMessage = (username, text) => {
return {
username,
text,
createdAt: new Date().getTime()
} }
Комментарии:
1. Вы пытались добавить type=»text/html» к <p>, содержащему сообщение?
2. Я пробовал все тот же результат
Ответ №1:
Похоже, вы используете React для рендеринга компонента сообщения. По умолчанию React обрабатывает весь HTML как текст. У них есть вызываемый метод dangerouslySetInnerHTML , который точно назван. Не рекомендуется разрешать пользователям отправлять HTML или любой другой код по соображениям безопасности. Хотя, если вы генерируете HTML, вам должно быть безопасно использовать этот метод.
Комментарии:
1. Спасибо!, есть ли какие-либо другие методы, которые я могу использовать для решения этой проблемы, или метод dangerouslySetInnerHTML является единственным способом в этом случае.