I am attempting to connect to a server that I created on a local machine.
This code connects when "ws://echo.websocket.org/" is used, but not the local ip and port number. Is there something I am not understanding about the application of websockets in tizen? I would like to be able to send data from the watch to a server (or just my computer)
<body><html>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #fff; font: 13px Helvetica, Arial; }
</style>
<div data-role="content" id="logs">
<div style='margin:auto;'>
<button type="button" onclick="connect_id()">Click here </button>
<div id="output"></div>
<p>Enter the data to send:
<input type="text" id="text_field" />
<button type="button" onclick="send_id()">Send </button>
<button type="button" onclick="disconnect_id()">Disconnect </button>
<p></p>
</div>
</div>
<script>
//prerequisists
//Initialize function
var wsUri = "ws://192.168.1.138:3000"; //local node.js server ip and port
var websocket;
var output;
output = document.getElementById("output");
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function connect_id(){
if ("WebSocket" in window)//test for browser support
{
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { //connecting to server
alert("connected");
writeToScreen("Connected");
};
websocket.onerror = function(evt) { //error in connection
alert("error in connection");
onError(evt)
};
websocket.onclose = function(evt) { //closing connection
alert("closed");
onClose(evt)
};
alert("browser supports websocket");
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
function send_id(){
var msg=document.getElementById('text_field');
console.log(msg.value);
console.log(websocket.readyState);
var message=msg.value;
console.log(message);
if(websocket.readyState == 1)
{
websocket.send(message);
writeToScreen("SENT: " + message);
alert("message",message );
websocket.onmessage = function(evt) { //receiving message from server
onMessage(evt)
};
}
else
alert("no connection");
}
function disconnect_id(){
if(websocket.readyState == 1){
websocket.close();
}
else
alert("not connected yet");
}
</script>
</html>
</body>
Node.js Javascript code:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname +'/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
HTML Code
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>