Tag Archives: WebSockets

Video: On C++, Javascript and WebSockets


Session presents Open Service Platform (OSP) – an application server engine inspired by OSGi, consisting of C++ and JavaScript runtime environments; OSP is based on the POCO C++ Libraries, with embedded Google V8 JavaScript engine.

A brief overview of the application server and underlying technologies will be given, followed by dissection of the most interesting implementation details – C++-to-JavaScript bridging mechanism and WebSocket-based messaging mechanism for transparent intra- and inter-process scalable communications. The language bridging mechanism exposes the C++ classes to JavaScript code without a need for manually written glue code or separate IDL constructs for interfaces. The messaging mechanism provides a unified, event-based interface for the in-process entities as well as those reachable over the network – be it TCP/HTTP server or a web browser.

Key design aspects, advantages, as well as trade-offs will be examined; a live example demonstrating key technologies in action will be presented.

Build a NodeJS powered Chatroom Web App Part 4: Chatroom UI with Bootstrap


Build a Node.js-powered Chatroom Web App: Chatroom UI with Bootstrap
// Kogonuso

sshot-10599.png
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
This Node.js tutorial series will help you build a Node.js-powered real-time chatroom web app fully deployed in the cloud. In this series, you will learn how to setup Node.js on your Windows machine (or just learn the concepts if you’re on Mac), how to develop a web frontend with Express, how to deploy a Node.js Express app to Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together.
The tutorial will use the optional Visual Studio and the Node.js Tools for Visual Studio plug-in as a development environment. I have provided links to free downloads of both tools. This is a beginner to intermediate-level article—you’re expected to know HTML5 and JavaScript.

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node.js, Mongo and Socket.IO

Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node.js Apps

Part 4 – Building a Chatroom UI with Bootstrap

Welcome to Part 4 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app.
In this installment, I will show you how to add a Twitter Bootstrap-styled frontend to the chatroom backend you built in Part 2 and Part 3.

What is Bootstrap?

Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number one project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile).

Adding Bootstrap to Our Project

To add Bootstrap to our project, we have to download the minified CSS and JS files for Bootstrap. You can download Bootstrap from this link. After you have downloaded Bootstrap, unzip the file and copy over the folders css, js, and fonts to the public folder in your project.
You will notice a few inconsistencies with the existing folder structure. We will unify the stylesheets and JavaScript folders. I prefer the Bootstrap nomenclature of css for stylesheets and js for javascript as that is shared with other third-party libraries. Copy the files in stylesheets into css and delete the javascript folder as it should be empty. Next go to layout.jade and change the following line:

link(rel='stylesheet' href='/stylesheets/style.css')

to:

link(rel='stylesheet' href='/css/style.css')

Next, we want to add the Bootstrap CSS file links to the header and the appropriate meta tags for HTML5 apps in the layout.jade file. You have to add the following lines right before the line containing the style.css link.

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

Next, we want to add the JavaScript file that Bootstrap needs for its components and plugins. Add the following line to the end of layout.jade:

script(type=’text/javascript’ src=’/js/bootstrap.min.js’)

Completed layout.jade

doctype html
html
head
title= title
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
link(rel='stylesheet' href='/css/style.css')
body
block content
script(type='text/javascript' src='/js/bootstrap.min.js')

Creating the Chat UI Layout

It is time to develop the chat user interface layout. First, you might want to read about Bootstrap and take a look at this long tutorial. All chat engines have an area for the recently received messages and an area for a user to write and send a message. Historically, the layout was to have the editing area attached to the bottom and the messages at the top.
It is not easy to fix elements on an HTML page to the bottom of the viewport without a bit of work. I will be following this sample to fix a footer to the bottom. We want to modify the index.jade file, and remove all the lines of code under the content block.
First, we add the area of the page that will contain messages received. Let’s start by adding a div with the class wrap. In Jade, all you need to write is .wrap to generate a

. By using the indentation, we can signal to the Jade templating engine that more indented elements will go within the less indented elements. Take a look at this Jade tutorial if you missed it in the other tutorials.
Next, we want to add another div with the class container-fluid to add a fluid width to the page. Inside, I will create an h1 element that says “Welcome to the Node Chatroom” and a div with an id messages and a final div with the class push that we will use to push down the message editing area of the chatroom to the bottom of the viewport.

.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push

Next, we are going to develop the message editing area. We want to capture the textbox and send button within a div called footer and a div called container-fluid. The footer div will have the same indentation as the wrap div.
Next, I will use the Bootstrap grid system (read about it here) to split the message editing area into two. One of the columns will take the majority of the space and will contain the textbox for writing the message, the second column will contain a block-level button for sending the message. Note how Jade lets us specify the attributes of an element using the paragraph notation. The code will look like this:

.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

Completed index.jade

extends layout
block content
.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push
.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

Adding CSS to Force the Message Editing Area to the Bottom of Viewport

We want to force the message editing area to the bottom of the viewport, we will want to add a few custom CSS rules in the public/css/style.styl page. This file uses the Stylus CSS preprocessor but you can also paste verbatim CSS that will be recopied into the generated CSS file.
First, we will want to ensure the whole page takes up 100% of the height.

html, body
height: 100%

Second, we want to ensure the wrap area takes up the maximum height it can but leaves a 60px margin at the bottom for our footer and message editing area.

.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px

Third, we want to ensure that this space for the editing area is respected and to assign it to the footer.

.push, .footer
height: 60px

Finally, for stylistic reasons, let’s add a subtle background color to the footer.

.footer
background-color: **#f5f5f5**

Completed style.styl

html, body
height: 100%
.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px
.push, .footer
height: 60px
.footer
background-color: #f5f5f5

Screenshot

If you did everything correctly, you should end up with a UI that looks like this:
1428455963Final-Screenshot-for-Node-UI.png

Conclusion

Voila! We have used Bootstrap and the Jade/Stylus preprocessors to add a nice UI layout for our chatroom that is served by Node.js. In the next installment, I will show you how to connect the UI and the Node.js backend via WebSockets.

Stay Tuned for Part 5!

Part 5 — Connecting the Chatroom with WebSockets is here. You can stay up-to-date on this and other articles by following my Twitter account

More Node.js Learning on Azure

For more in-depth learning on Node.js, my course is available here on Microsoft Virtual Academy.
Or some shorter-format videos on similar Node.js subjects:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Rami Sayar is a technical evangelist at Microsoft Canada focusing on web development (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), open data and open source technologies (Python, PHP, Java, Android, Linux, etc.) Read his blog or follow him on Twitter.

Build a NodeJS powered Chatroom Web App Part 5: Connecting with WebSockets


Build a Node.js-powered Chatroom Web App: Connecting with WebSockets
// Kogonuso

sshot-10601.png
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.This Node.js tutorial series will help you build a Node.js-powered real-time chatroom web app fully deployed in the cloud. In this series, you will learn how to setup Node.js on your Windows machine (or just learn the concepts if you’re on Mac), how to develop a web frontend with Express, how to deploy a Node.js Express app to Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together.
The tutorial will use the optional Visual Studio and the Node.js Tools for Visual Studio plug-in as a development environment. I have provided links to free downloads of both tools. This is a beginner to intermediate-level article –you’re expected to know HTML5 and JavaScript.

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node.js, Mongo and Socket.IO
Part 4 – Building a Chatroom UI with Bootstrap
Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node.js Apps

Part 5 – Connecting the Chatroom with WebSockets

Welcome to Part 5 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app.
In this installment, I will show you how to connect the front-end chatroom to the Node.js chatroom backend that you built in Part 2, Part 3 and Part 4.

Adding jQuery, SocketIO and index.js

The first thing we want to do before we start writing our front-end JavaScript code is to ensure the files and dependencies we need are going to be delivered by the Node.js server. Let’s add jQuery and Socket.IO first to the layout.jade file which is extended by all the other jade files in our project.
Replace the single link to bootstrap.min.js with a link to all the other files we need.

script(type='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery­2.1.1.min.js')
script(type='text/javascript' src='/js/bootstrap.min.js')
script(type='text/javascript' src='/socket.io/socket.io.js')

Note, the first line links to jQuery hosted on the Microsoft Ajax Content Delivery Network. This CDN hosts popular third party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications. You can significantly improve the performance of your Ajax applications by using a CDN. The contents of the CDN are cached on servers located around the world. The CDN supports SSL (HTTPS) in case you need to serve a web page using the Secure Sockets Layer.
Now I will add one more line at the end to create a new block.

block body_end

I am doing this so that any Jade file that extends layout.jade can also add script tags right before the end of the body tag.
Now we want to use that new block to add a link to our index.js file which we will create in the public/js folder, make sure to create the file.

block body_end
script(type='text/javascript' src='/js/index.js')

Make sure that the block starts with zero indentation to follow Jade coding conventions. If you run the Node.js server and navigate to the main page in your browser, you will notice in your F12 tools that the files are being served correctly.

Quick Changes to app.js

There’s a few things I want to change in app.js. First, I want to reverse the sorting direction so that the oldest messages are sent first and second. I also want to emit the previously received chat messages on the same channel as I plan on receiving the new messages. The changes will go to line 49 and 50 in app.js. This is the result:

var stream = collection.find().sort().limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });

Don’t forget to set the CUSTOMCONNSTR_MONGOLAB_URI environment variable before rerunning the app.js file as otherwise the Node.js backend will crash when it can’t connect to your MongoDB.
It is time to power up that send button to send messages in the message box using WebSockets to the backend server on the chat channel.

var socket = io();
$('#send-message-btn').click(function () {
var msg = $('#message-box').val();
socket.emit('chat', msg);
$('#messages').append($('').text(msg));
$('#message-box').val('');
return false;
});
socket.on('chat', function (msg) {
$('#messages').append($('').text(msg));
});

Line 1

We want to create a socket and we can do that by calling the io() function which is in the socket.io-client.js file.

Line 2

After that, we want to execute a function on the click of the “Send Message” button using the jQuery’s $() function and the click() method.

Line 3

We will get the string value in the message box using jQuery’s $() function and the val() method.

Line 4

We use the emit() function on the socket variable we created in line 1 to send a message on the “chat” channel containing the message box’s value.

Line 5-7

At this point, we will append the message in the message box to the div having messages as its ID, so that the user can see the message was sent. We will assign the value of the message box to an empty string to clear it up.

Line 9-10

We want to append the message received on the chat channel from other users to the div having messages as its ID. The Node.js backend will not resend the message that the client wrote back to itself, but that’s alright because we added the message right away in the click() function handler.
1428464728Sockets-final-screenshot.png

Conclusion

Voila! You have connected your backend and your front-end using WebSockets. If you want to identify the people in the chatroom or add an avatar for each user, it is up to you but you can use this chatroom onward. In the next installment, I will show you how to deploy this anonymous chatroom to Azure and show you how you can debug it.

Stay Tuned for Part 6!

Part 6— The Finale and Debugging Remote Node Apps! is here. You can stay up-to-date on this and other articles by following my twitter account

More Node.js Learning on Azure

For more in-depth learning on node, my course is available here on Microsoft Virtual Academy.
Or some shorter-format videos on similar node subjects:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Rami Sayar is a technical evangelist at Microsoft Canada focusing on web development (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), open data and open source technologies (Python, PHP, Java, Android, Linux, etc.) Read his blog or follow him on Twitter.

Concurrent Live Updates with WebSockets


Agenda This entry is to demonstrate such Java EE 7 scrummy APIs as WebSockets, JMS and EJB being used together. We’re going to witness multiple web clients – browser windows – receiving live updates from server simultaneously. The app server – WildFly (former JBoss).

http://ikolosov.com/2015/06/07/concurrent-live-updates-with-websockets/

Working with Bluetooth using NodeJS and node-red from Intel Edison


via Working with Bluetooth using Node.js and node-red from Intel Edison – CodeProject.

If you are working with Intel Edison then you must have already discovered that getting bluetooth to work in any sensible way in Edison is just a dead end. More so, if you are looking for a workaround with Node.js or node-red.

After hours of trail and errors, I could get it to work. So I am crating this page. Hope it saves someone’s precisous time!

I would tell you the logic first. Intel Edison Bluetooth does not have a Serial port service which is important for phone-Edison communication. Intel has a Python script that provides Serial port service. A mod of this python script was written to write the data to a named pipe which could then be read from programs like Arduino.

Bad news is that javascript does not and will probably never support named pipes. So we write a bash script to read data from named pipe. Now using a command line websocket we publish the data being received by this shell script.

Now we install websocket and ws ( a client) with npm to enable Node.js to work with websockets. Using websocket client we listen to our deamon server.

Android Mobile–> Serial Port–> Python Background Script–> Named Pipe—> Bash Script–> Websocket–>Javascript.

Don’t get afraid. Steps aren’t too complicated. It works like a charm.

Concurrent Live Updates with WebSockets


Agenda This entry is to demonstrate such Java EE 7 scrummy APIs as WebSockets, JMS and EJB being used together. We’re going to witness multiple web clients – browser windows – receiving live updates from server simultaneously. The app server – WildFly (former JBoss).

http://ikolosov.com/2015/06/07/concurrent-live-updates-with-websockets/

Simple bridge to phantomjs for NodeJS


via baudehlo/node-phantom-simple · GitHub.

A bridge between PhantomJS / SlimerJS and Node.js.

This module is API-compatible with node-phantom but doesn’t rely on WebSockets / socket.io. In essence the communication between Node and Phantom / Slimer has been simplified significantly. It has the following advantages over node-phantom:

  • Fewer dependencies/layers.
  • Doesn’t use the unreliable and huge socket.io.
  • Works under cluster (node-phantom does not, due to how it works) server.listen(0) works in cluster.
  • Supports SlimerJS.