专栏首页Jerry的SAP技术分享一个最简单的WebSocket hello world demo
原创

一个最简单的WebSocket hello world demo

服务器端代码不超过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();
</pre>

代码第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>
</pre>

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript概览

    近日的项目需要用JavaScript完成,于是决定通读《JavaScript高级程序设计第三版》,书是2012年的,比较老了,但是可以用来快速了解JavaScr...

    刘开心_1266679
  • 半路出家程序员的痛旁人不会懂

    非科班出身的程序员,不仅要面对科班出身者的技术优势,还要面临职场偏见,尽管压力重重,但只要够努力,这一切都不是问题。

    技术zhai
  • 大厂面试官:Java工程师的“十项全能”

    技术zhai
  • mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改

    mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改 原文连接:直通车 Mongodb并不提供Alter table这...

    学到老
  • python yield函数深入浅出理解

    首先关于生成器的那些事: 1.通常的for…in…循环中,in后面是一个数组,这个数组就是一个可迭代对象,类似的还有链表,字符串,文件。它的缺陷是所有数据都...

    学到老
  • Hexo 入门指南(二) - 安装、初始化和配置

    站点的配置文件是_config.yml,如果你不小心改花了,这里提供了一份默认的:

    ApacheCN_飞龙
  • HTML5与HTML4的区别,新增的元素有哪些?

    注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由

    学到老
  • Javascript中四种函数调用方式

    function showmsg(){ console.log(this);}

    ApacheCN_飞龙
  • JavaScript 学习一

    在html中调用js代码的方法主要有两种(一般js代码放在body的最下面,将其他解释完在加载js,): 一、将javascript直接写在html文件中,...

    学到老
  • 并发编程之显式条件

    我们之前介绍 synchronized 关键字语义的时候说过,synchronized 虽然不需要我们手动的加锁和释放锁了,但不代表他没有用到锁。同时,我们说每...

    Single

扫码关注云+社区

领取腾讯云代金券