一个最简单的WebSocket hello world demo

栏目: Html5 · 发布时间: 5年前

内容简介:服务器端代码不超过42行:代码第10行创建一个WebSocket服务器,监听在9999端口上:

服务器端代码不超过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端口上:

一个最简单的WebSocket hello world demo

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

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

https://github.com/i042416/Kn...

使用nodejs启动这个服务器:

一个最简单的WebSocket hello world demo

网页端代码:

<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上:

一个最简单的WebSocket hello world demo

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

一个最简单的WebSocket hello world demo


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精益创业

精益创业

[美] 埃里克·莱斯 / 吴彤 / 中信出版社 / 2012-8 / 49.00元

《精益创业:新创企业的成长思维》内容简介:我们正处在一个空前的全球创业兴盛时代,但无数创业公司都黯然收场,以失败告终。精益创业代表了一种不断形成创新的新方法,它源于“精益生产”的理念,提倡企业进行“验证性学习”,先向市场推出极简的原型产品,然后在不断地试验和学习中,以最小的成本和有效的方式验证产品是否符合用户需求,灵活调整方向。如果产品不符合市场需求,最好能“快速地失败、廉价地失败”,而不要“昂贵......一起来看看 《精益创业》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具