Compare commits

..

4 Commits

Author SHA1 Message Date
Daniel Legt 1b1fe59877 * Fixed preview not updating 2022-06-07 00:04:49 +03:00
Daniel Legt 6cc1628e77 Real time WebSocket pasting
+ Pad update moved to sockets
+ Pad status updates instantly update
TODO: Fix live text highlight
2022-06-07 00:02:31 +03:00
Daniel Legt bf144c6ecb * Fixed possible bug 2022-06-06 22:50:20 +03:00
Daniel Legt 1d3383c8c6 * Removed deprecated variable 2022-06-06 22:49:55 +03:00
5 changed files with 282 additions and 31 deletions

1
go.mod
View File

@ -4,6 +4,7 @@ go 1.15
require ( require (
github.com/gin-gonic/gin v1.7.7 github.com/gin-gonic/gin v1.7.7
github.com/google/uuid v1.3.0 // indirect
github.com/gorilla/websocket v1.5.0 // indirect github.com/gorilla/websocket v1.5.0 // indirect
github.com/joho/godotenv v1.4.0 github.com/joho/godotenv v1.4.0
github.com/mrz1836/go-sanitize v1.1.5 github.com/mrz1836/go-sanitize v1.1.5

2
go.sum
View File

@ -38,6 +38,8 @@ github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/
github.com/google/go-cmp v0.5.6 h1:BKbKCqvP6I+rmFHt06ZmyQtvB8xAkWdhFyr0ZUNZcxQ= github.com/google/go-cmp v0.5.6 h1:BKbKCqvP6I+rmFHt06ZmyQtvB8xAkWdhFyr0ZUNZcxQ=
github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE= github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg= github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc= github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE= github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU= github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=

View File

@ -6,7 +6,9 @@ import (
"fmt" "fmt"
"net/http" "net/http"
"github.com/JustKato/FreePad/lib/objects"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
"github.com/google/uuid"
"github.com/gorilla/websocket" "github.com/gorilla/websocket"
) )
@ -15,6 +17,9 @@ var wsUpgrader = websocket.Upgrader{
WriteBufferSize: 1024, // TODO: Make it configurable via the .env file WriteBufferSize: 1024, // TODO: Make it configurable via the .env file
} }
// The pad socket map caches all of the existing sockets
var padSocketMap map[string]map[string]*websocket.Conn = make(map[string]map[string]*websocket.Conn)
// TODO: Use generics so that we can take string messages, that'd be nice! // TODO: Use generics so that we can take string messages, that'd be nice!
type SocketMessage struct { type SocketMessage struct {
EventType string `json:"eventType"` EventType string `json:"eventType"`
@ -25,32 +30,54 @@ type SocketMessage struct {
// Bind the websockets to the gin router // Bind the websockets to the gin router
func BindSocket(router *gin.RouterGroup) { func BindSocket(router *gin.RouterGroup) {
router.GET("/get", func(ctx *gin.Context) { router.GET("/get/:pad", func(ctx *gin.Context) {
webSocketUpgrade(ctx.Writer, ctx.Request) // Get the name of the pad to assign to this socket
padName := ctx.Param("pad")
// Upgrade the socket connection
webSocketUpgrade(ctx.Writer, ctx.Request, padName)
}) })
} }
func webSocketUpgrade(w http.ResponseWriter, r *http.Request) { func webSocketUpgrade(w http.ResponseWriter, r *http.Request, padName string) {
conn, err := wsUpgrader.Upgrade(w, r, nil) conn, err := wsUpgrader.Upgrade(w, r, nil)
if err != nil { if err != nil {
fmt.Printf("Failed to set websocket upgrade: %v\n", err) fmt.Printf("Failed to set websocket upgrade: %v\n", err)
return return
} }
// Check if we have any sockets in this padName
if _, ok := padSocketMap[padName]; !ok {
// Initialize a new map of sockets
padSocketMap[padName] = make(map[string]*websocket.Conn)
}
// Give this socket a token
socketToken := uuid.NewString()
// Set the current connection at the socket Token position
padSocketMap[padName][socketToken] = conn
// Somone just connected
UpdatePadStatus(padName)
// Start listening to this socket // Start listening to this socket
for { for {
// Try Read the JSON input from the socket // Try Read the JSON input from the socket
_, msg, err := conn.ReadMessage() _, msg, err := conn.ReadMessage()
// Check if a close request was sent // Check if anything but a read limit was created
if errors.Is(err, websocket.ErrCloseSent) { if err != nil && !errors.Is(err, websocket.ErrReadLimit) {
// Remove self from the cache
delete(padSocketMap[padName], socketToken)
// Somone just disconnected
UpdatePadStatus(padName)
break break
} }
if err != nil { if err != nil {
// There has been an error reading the message // There has been an error reading the message
fmt.Println("Failed to read from the socket") fmt.Println("Failed to read from the socket but probably still connected")
// Skip this cycle // Skip this cycle
continue continue
} }
@ -67,19 +94,104 @@ func webSocketUpgrade(w http.ResponseWriter, r *http.Request) {
} }
// Pass the message to the proper handlers // Pass the message to the proper handlers
handleSocketMessage(p, socketToken, padName)
handleSocketMessage(p)
} }
} }
// Handle the socket's message // Handle the socket's message
func handleSocketMessage(msg SocketMessage) { func handleSocketMessage(msg SocketMessage, socketToken string, padName string) {
// Check the type of message // Check if this is a pad Update
fmt.Println(msg.EventType) if msg.EventType == `padUpdate` {
handlePadUpdate(msg, socketToken, padName)
// Serialize the message
serialized, err := json.Marshal(msg)
// Check if there was an error
if err != nil {
fmt.Println(`Failed to broadcast the padUpdate`, err)
// Stop the execution
return
}
// Alert all the other pads other than this one.
for k, pad := range padSocketMap[padName] {
// Check if this is the same socket.
if k == socketToken {
// Skip self
continue
}
// Send the message to the others.
pad.WriteMessage(websocket.TextMessage, serialized)
}
}
} }
func BroadcastMessage(padName string, message string) { func handlePadUpdate(msg SocketMessage, socketToken string, padName string) {
// Check if the msg content is valid
if _, ok := msg.Message[`content`]; !ok {
fmt.Printf("Failed to update pad %s, invalid message\n", padName)
return
}
// Check that the content is string
newPadContent, ok := msg.Message[`content`].(string)
if !ok {
fmt.Printf("Type assertion failed for %s, invalid message\n", padName)
return
}
// Get the pad
pad := objects.GetPost(padName, false)
// Update the pad contents
pad.Content = newPadContent
// Save to file
objects.WritePost(pad)
}
// Update the current users of the pad about the amount of live viewers.
func UpdatePadStatus(padName string) {
// Grab info about the map's key
sockets, ok := padSocketMap[padName]
// Check if the pad is set and has sockets connected.
if !ok || len(sockets) < 1 {
// Quit
return
}
// Generate the message
msg := SocketMessage{
EventType: `statusUpdate`,
PadName: padName,
Message: gin.H{
// Send the current amount of live viewers
"currentViewers": len(sockets),
},
}
BroadcastMessage(padName, msg)
}
func BroadcastMessage(padName string, msg SocketMessage) {
// Grab info about the map's key
sockets, ok := padSocketMap[padName]
// Check if the pad is set and has sockets connected.
if !ok || len(sockets) < 1 {
// Quit
return
}
// Get all the participants of the pad group
for _, s := range sockets {
// Send the message to the socket
s.WriteJSON(msg)
}
} }

View File

@ -1,11 +1,24 @@
class PadSocket { class PadSocket {
ws = null;
padName = null;
/** /**
* @deprecated * @type {WebSocket}
*/ */
state = null; ws = null;
/**
* @type {String}
*/
padName = null;
/**
* The actual textarea you write in
* @type {HTMLTextAreaElement}
*/
padContents = null;
/**
* The <code> of the preview
* @type {HTMLElement}
*/
padPreview = null;
/** /**
* Create a new PadSocket * Create a new PadSocket
@ -13,27 +26,35 @@ class PadSocket {
* @param {string} connUrl The URL to the websocket * @param {string} connUrl The URL to the websocket
*/ */
constructor(padName, connUrl = null) { constructor(padName, connUrl = null) {
// Assign the pad name
this.padName = padName;
// Check if a connection URL was mentioned // Check if a connection URL was mentioned
if ( connUrl == null ) { if ( connUrl == null ) {
// Try and connect to the local websocket // Try and connect to the local websocket
connUrl = `ws://` + window.location.host + "/ws/get"; connUrl = `ws://` + window.location.host + `/ws/get/${padName}`;
} }
// Connect to the websocket // Connect to the websocket
const ws = new WebSocket(connUrl); const ws = new WebSocket(connUrl);
ws.onopen = () => {
// TODO: This is redundant, we could check the websocket status: ws.readyState == WebSocket.OPEN
this.state = 'active';
}
// Bind the onMessage function // Bind the onMessage function
ws.onmessage = this.handleMessage; ws.onmessage = this.handleMessage;
ws.onopen = () => {
updateStatus(`Established`, `text-success`);
}
// Try and reconnect on failure
ws.onclose = connectSocket;
ws.onerror = connectSocket;
// Assign the websocket // Assign the websocket
this.ws = ws; this.ws = ws;
// Assign the pad name
this.padName = padName; // Get all relevant references from the HTML
this.padContents = document.getElementById(`pad-content`);
this.padPreview = document.getElementById(`textarea-preview`);
} }
/** /**
@ -43,12 +64,12 @@ class PadSocket {
*/ */
sendMessage = (eventType, message) => { sendMessage = (eventType, message) => {
if ( this.state != 'active' ) { if ( this.ws.readyState !== WebSocket.OPEN ) {
throw new Error(`The websocket connection is not active`); throw new Error(`The websocket connection is not active`);
} }
// Check if the message is a string // Check if the message is a string
if ( typeof message == 'string' ) { if ( typeof message !== 'object' ) {
// Convert the message into a map[string]interface{} // Convert the message into a map[string]interface{}
message = { message = {
"message": message, "message": message,
@ -64,8 +85,124 @@ class PadSocket {
} }
/**
* Handle the message from the socket based on the message type
* @param {MessageEvent} e The websocket message
*/
handleMessage = ev => { handleMessage = ev => {
console.log(ev); updateStatus(`Catching Message`, `text-white`);
// Check if the message has valid data
if ( !!ev.data ) {
// Try and parse the data
let parsedData = null;
try {
parsedData = JSON.parse(ev.data);
} catch ( err ) {
console.error(`Failed to parse the WebSocket data`,err);
updateStatus(`Parse Fail`, `text-warning`);
}
if ( !!!parsedData['message'] ) {
console.error(`Failed to find the message`)
updateStatus(`Message Fail`, `text-warning`);
return;
}
// Check if this is a pad Content Update
if ( parsedData['eventType'] === `padUpdate`) {
// Pass on the parsed data
this.onPadUpdate(parsedData);
} // Check if this is a pad Status Update
else if ( parsedData['eventType'] === `statusUpdate`) {
// Pass on the parsed data
this.onStatusUpdate(parsedData);
}
updateStatus(`Established`, `text-success`);
}
}
/**
* Whenever a pad update is trigered, run this function
* @param {Object} The response from the server
*/
onPadUpdate = data => {
// Check that the content is clear
if ( !!data['message']['content'] ) {
// Send over the new content to be updated.
updatePadContent(data['message']['content']);
}
}
onStatusUpdate = data => {
// Check that the content is clear
if ( !!data['message']['currentViewers'] ) {
// Get the amount of viewers reported by the server
const viewerCount = Number(data['message']['currentViewers']);
// Check if this is a valid number
if ( Number.isNaN(viewerCount) ) {
// Looks like this is a malformed message
return console.error(`Malformed Message`, data);
}
// Send over the new content to be updated.
updatePadViewers(viewerCount);
}
}
/**
* Sending a pad update for each keystroke to the server.
* @param {String} msg The new contents of the pad
*/
sendPadUpdate = msg => {
// Get the contents of the pad
const padContents = this.padContents.value;
// Send the data over the webSocket
this.sendMessage(`padUpdate`, {
"content": padContents,
});
updatePadContent(padContents, false);
}
}
/**
* Update the contents of the pad
* @param {String} newContent
*/
function updatePadContent(newContent, textArea = true) {
// Update the textarea
if ( textArea ) document.getElementById(`pad-content`).value = newContent;
// Update the preview
document.getElementById(`textarea-preview`).innerHTML = newContent;
// TODO: Re-run the syntax highlight
}
function updatePadViewers(vc) {
// Get the reference to the viewers count inputElement
/**
* @type {HTMLInputElement}
*/
const viewerCount = document.getElementById(`currentViewers`);
// Get the amount of total viewers
const totalViews = viewerCount.value.split("|")[1].trim();
// Set back the real value
viewerCount.value = `${vc} | ${totalViews}`;
}
function connectSocket() {
// Check if the socket is established
if ( !!!window.socket || window.socket.readyState !== WebSocket.OPEN ) {
updateStatus(`Connecting...`, `text-warning`);
// Connect the socket
window.socket = new PadSocket(padTitle);
} }
} }
@ -73,5 +210,5 @@ class PadSocket {
// TODO: Test if this is actually necessary or the DOMContentLoaded event would suffice // TODO: Test if this is actually necessary or the DOMContentLoaded event would suffice
// wait for the whole window to load // wait for the whole window to load
window.addEventListener(`load`, e => { window.addEventListener(`load`, e => {
window.socket = new PadSocket(padTitle); connectSocket()
}) })

View File

@ -53,8 +53,7 @@
<pre><code id="textarea-preview" class="form-control hidden">{{.post_content}}</code></pre> <pre><code id="textarea-preview" class="form-control hidden">{{.post_content}}</code></pre>
<textarea maxlength="{{.maximumPadSize}}" name="pad-content" id="pad-content" onchange="sendMyData(this)" <textarea maxlength="{{.maximumPadSize}}" name="pad-content" id="pad-content" onkeyup="window.socket.sendPadUpdate()"
onkeydown="updateStatus(`Not Saved`, `text-warning`); toggleWritingWatch(this)"
class="form-control hidden">{{.post_content}}</textarea> class="form-control hidden">{{.post_content}}</textarea>
</div> </div>
@ -73,7 +72,7 @@
</div> </div>
</div> </div>
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Current Viewers"> <div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Current Viewers | Total Views">
<div class="input-group"> <div class="input-group">
<span class="input-group-text"> <span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
@ -86,7 +85,7 @@
</path> </path>
</svg> </svg>
</span> </span>
<input type="text" class="form-control" readonly value="{{.views}}"> <input type="text" class="form-control" readonly value="1 | {{.views}}" id="currentViewers">
</div> </div>
</div> </div>