首发:鲸讯微信小程序
作者:鲸林向海工作室
1、websocket简介
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
2、html代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>websocket示例</title>
<style type="text/css">
</style>
</head>
<body>
<div id="connected">
</div>
<script type="text/javascript">
var onOpen = function() {
console.log("Socket opened.");
socket.send("Hi, Server!");
},
onClose = function() {
console.log("Socket closed.");
},
onMessage = function(data) {
console.log("We get signal:");
//转换成json数据
console.log(JSON.parse(data.data));
//数据测试
var a =document.getElementById('connected');
a.append(data.data)
},
onError = function() {
console.log("We got an error.");
},
//通讯地址
socket = new WebSocket("ws://127.0.0.1:8080/");
socket.onopen = onOpen;
socket.onclose = onClose;
socket.onerror = onError;
socket.onmessage = onMessage;
</script>
</body>
</html>
3、JS代码
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
//引入json数据
const data = require('./data/server.json');
//转换数据类型
var demo =JSON.stringify(data);
console.log(typeof demo);
//发送数据
ws.send(demo);
});
4、完整代码
github:github.com/piaoxiaobo/…