app.coffee

# Create a WebSocket connection to the chat server
ws = new WebSocket 'ws://localhost:8081'

messages = []

# Add an event listener that will trigger when connection is open
ws.onopen = (event) ->
	print 'Connection to chat server is now open'

# Add an event listener that will trigger when connection closes
ws.onclose = (event) ->
	print 'Connection to chat server is now closed'

# Add an event listener that will trigger when message is received
ws.onmessage = (event) ->
	# Parse the JSON-string into an object
	payload = JSON.parse event.data
	
	# Prints the payload-object
	print payload
	
	text = new TextLayer
		text: payload.text
		fontSize: 22
		x: 50
		y: (80 * messages.length) + 50
		color: '#000'
		fontWeight: 600
	
	time = new TextLayer
		parent: text
		y: 30
		text: new Date(payload.timestamp).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
		fontSize: 18
		color: '#000'
	
	messages.push(payload)
 

# Create a button
btn = new Layer
	width: 300
	height: 80
	x: Align.center()
	y: Align.bottom(-250)
	borderRadius: 50
	backgroundColor: '#44f'

btnText = new TextLayer
	parent: btn
	text: 'Send Random Message'
	x: Align.center()
	y: Align.center()
	color: '#fff'
	fontSize: 22

# Add onPress-event to layer
btn.on Events.Click, ->
  	# Create a payload with some data
	payload = 
		text: 'This is a simple message'
		timestamp: Date.now()
  
	# Turn the payload into a JSON-string and send the it to the server
	ws.send(JSON.stringify(payload));