服务器端代码不超过42行:

const WSServer = require("./server.js");

var counter = 0;

function createWebsocket() {

  var host = "127.0.0.1";
var port = "9999"; var wsServer = WSServer.startServer(host, port);
console.log("WebSocket server listens to: " + host + ":" + port);
wsServer.on('open', (data) => {
console.log('WS Client has connected: ' + data); setInterval(function(){
counter++;
WSServer.broadcast("Jerry: " + counter );
}, 3000); }); wsServer.on('dataWS', (data) => {
console.log('Receive Data from WebUI : ' + data);
}); wsServer.on('disconnect', (data) => {
console.log('WSServer disconnect:' + data.name);
}); wsServer.on('close', (data) => {
console.log('WSServer close: ' + data.name);
}); wsServer.on('end', (data) => {
console.log('WSServer Close: '+data.name);
}); wsServer.on('error', (data) => {
});
} createWebsocket();

代码第10行创建一个WebSocket服务器,监听在9999端口上:

第15~18行每隔3秒发送一个字符串到浏览器,用一个计数器标识每次发送的请求。

代码里所需的server.js我已经上传到我的Github上了:

https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server.js

使用nodejs启动这个服务器:

网页端代码:

<html>
<script src="socket.io.dev.js">
</script>
<script>
console.log("1"); var socket = io('ws://127.0.0.1:9999');
socket.on('connect', function(){
console.log("connected!");
});
socket.on('event', function(data){
console.log("event: " + data);
}); socket.on('news', function(data){
console.log("data from server: " + JSON.stringify(data,2,2));
}); socket.on('disconnect', function(){
console.log("disconnect...");
}); </script>
</html>

浏览器端每隔三秒收到服务器推送的消息,打印在console上:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

一个最简单的WebSocket hello world demo的更多相关文章

  1. 用 Go 编写一个简单的 WebSocket 推送服务

    用 Go 编写一个简单的 WebSocket 推送服务 本文中代码可以在 github.com/alfred-zhong/wserver 获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息 ...

  2. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  3. Dubbo入门介绍---搭建一个最简单的Demo框架

    Dubbo入门---搭建一个最简单的Demo框架 置顶 2017年04月17日 19:10:44 是Guava不是瓜娃 阅读数:320947 标签: dubbozookeeper 更多 个人分类: D ...

  4. 一个简单的MariaDB认证插件demo

    代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...

  5. springboot搭建一个简单的websocket的实时推送应用

    说一下实用springboot搭建一个简单的websocket 的实时推送应用 websocket是什么 WebSocket是一种在单个TCP连接上进行全双工通信的协议 我们以前用的http协议只能单 ...

  6. 10分钟完成一个最最简单的BLE蓝牙接收数据的DEMO

    这两天在研究蓝牙,网上有关蓝牙的内容非常有限,Github上的蓝牙框架也很少很复杂,为此我特地写了一个最最简单的DEMO,实现BLE蓝牙接收数据的问题, 不需要什么特定的UUID, 不需要什么断开重连 ...

  7. 搭建CAS服务器,并实现一个简单的单点登录的demo

    官网:http://jasig.github.io/cas/Cas Server下载:http://developer.jasig.org/cas/Cas Client下载:http://develo ...

  8. socket.io简单说明及在线抽奖demo

    socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...

  9. WebSocket简单介绍(WebSocket 实战)(3)

    这一节里我们用一个案例来演示怎么使用 WebSocket 构建一个实时的 Web 应用.这是一个简单的实时多人聊天系统,包括客户端和服务端的实现.客户端通过浏览器向聊天服务器发起请求,服务器端解析客户 ...

随机推荐

  1. oracle 比较日期相等

    where to_char(date1, 'yyyymmdd')=to_char(date2,'yyyymmdd'); or where to_date(char1, 'yyyymmdd')=to_d ...

  2. How to update Ionic cli and libraries

    1)npm outdated 2)手动修改你项目的package.json文件,找对应的版本号 3)npm update 重新安装包就可以了. 转自:http://devfanaticblog.com ...

  3. C# 实现寻峰算法的简单优化(包含边峰,最小峰值,峰距)

      核心寻峰算法的原理参考Ronny,链接:投影曲线的波峰查找, C#翻译原理代码参考sowhat4999,链接:C#翻译Matlab中findpeaks方法 前人种树,后人乘凉.感谢原作者详细的解释 ...

  4. css 相对单位rem详解

      CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...

  5. 在GDI+中如何实现以左下角为原点的笛卡尔坐标系

    今天写了一个求点集合的凸包的一个算法,虽然结果求解出来了,但是想将过程用GDI+绘制出来,就需要将点绘制出来,然而c#GDI+中绘图的坐标与我们常用数学中笛卡尔坐标系是不一样的,所以就要转换GDI+中 ...

  6. SQL Server 数据库差异 查询

    -- 比较两个数据库中表的差异 -- u表,p存储过程,v视图 -- INTFSIMSNEW新库,INTFSIMS旧库 SELECT NTABLE = A.NAME, OTABLE = B.NAME ...

  7. Docker for Windows(五)实践搭建SqlServer服务&执行数据库操作

    上一篇我们已经搭建了一个mysql数据库服务了:Docker for Windows(四)实践搭建&删除MySQL服务,发现用Docker确实是方便且容易,但上一篇主要是服务的搭建删除等基础操 ...

  8. DOM增删改操作

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 【Android】Retrofit 2.0 的使用

    一.概述 Retrofit是Square公司开发的一个类型安全的Java和Android 的REST客户端库.来自官网的介绍: A type-safe HTTP client for Android ...

  10. Android MVP模式就是这么回事儿

    MVP模式 概念就不说了,大家都懂.View层通过Persenter层相互通信,避免了View中大量的业务代码,而将其提取到Model中.其实简单的来说,就是通过接口回调,把业务分离出去.提高代码的可 ...