Serial Port Data Transfer on Javascript

An example of how to send and receive data from serial port on javascript with StrokeReader ActiveX. The code works with any RS232/RS485 ports and USB-to-serial adapters.

Requirements

Download and install the serial port interface ActiveX;
You need a browser that supports ActiveX (any version of Internet Explorer starting from version 11 is recommended).

How to Proceed

Paste the below code into a html file;
Check your Internet Explorer security settings to enable ActiveX execution.
Check the port number / baud rate / start-stop bit settings in the javascript code;
Check if your remote device requres specific DTR/RTS levels.

The Code Example

Expand/Collapse

<!-- An example of controlling a serial port from JS with StrokeReader ActiveX -->
<html>
<head>
<script type="text/javascript">
var port;

function SetPort() 
{ 
	port = document.getElementById("comport");
	port.Port = 1;  //COM1
	port.BaudRate = 9600;
	port.DataBits = 8;
	port.Parity = 0; //NOPARITY
	port.StopBits = 0; //one stop bit

	port.Connected = 1; 
	
	if(port.Error > 0)
		alert(port.ErrorDescription);
}

function SendData()
{ 
	s = new Array(0x01, 0x20, 0x40, 0x80, 0xFF);  //Sending an array of bytes
	port.Send(s);
	
	port.Send("ABCDE"); //Sending a text string
}

function RTS_click()
{
	rts = document.getElementById("rts");
	port.RTS = rts.checked;
}
function DTR_click()
{
	dtr = document.getElementById("dtr");
	port.DTR = dtr.checked;
}

function Disconnect()
{
	port.Connected = 0;
}

function Connect()
{
	port.Connected = 1;
}

function port_list()
{
	ports = port.PortsAvailable.split(",");
	s = "";
	for (i = 0; i<ports.length; i++)
		s += port.GetPortFriendlyName(ports[i]) + "\n";
	alert(s);
}
</script>

<script for="comport" event="CommEvent(Evt, Data)">
	port =  document.getElementById("comport");
	connected =  document.getElementById("connected");
	cts =  document.getElementById("cts");
	dsr =  document.getElementById("dsr");
	output = document.getElementById("output");

	if(Evt==3) //=EVT_CONNECT
	{
		connected.checked = true;
	}
	if(Evt==0) //=EVT_DISCONNECT
	{
		connected.checked = false;
	}
	if(Evt==2) //EVT_SERIALEVENT
	{
		if(Data&0x0008)
		{
			cts.checked = port.CTS;
		}
		if(Data&0x0010)
		{
			dsr.checked = port.DSR;
		}
	}	
	if(Evt==1) //=EVT_DATA
	{ 
		var a = port.Read(2); //BINARYJS
		if(typeof a==="undefined")
			return;
		s = "";
		arr = new VBArray(a).toArray();
		for (i = 0; i<arr.length; i++)
			s += " " + arr[i].toString(16);
		output.value += s;
	}
</script>
</head>

<body onload="SetPort()">  
	<object classid="CLSID:7E42B8C5-73BE-4806-8904-FF4080A696EC" id="comport"></object>

	<button onclick="javascript:SendData()">Send</button>
	<button onclick="javascript:Disconnect()">Disconnect</button>
	<button onclick="javascript:Connect()">Connect</button>
	<button onclick="javascript:port_list()">Port list</button>
	<input type="checkbox" id="rts" onClick="RTS_click()">RTS</input>
	<input type="checkbox" id="dtr" onClick="DTR_click()">DTR</input>
	<br>
	<input type="checkbox" disabled="disabled" id="connected">Connected</input>
	<input type="checkbox" disabled="disabled" id="cts">CTS</input>
	<input type="checkbox" disabled="disabled" id="dsr">DSR</input>
	<br>
	<textarea id="output" rows=10 cols=50></textarea>

</body>
</html>