文件结构

node.js代码

// 需要HTTP 模块来启动服务器和Socket.IO
var http= require('http');
var fs = require('fs');
// 在8080端口启动服务器
var server= http.createServer(function(req, res){
// 发送HTML的headers和message

    fs.readFile('../index.html',function(error,data){
        res.writeHead(200,{'Content-Type':'text/html'});
        res.end(data,'utf-8');
    });
});
server.listen(8080,function () {
    console.log('监听端口是 8080 ,服务已启动');
});
// 创建一个Socket.IO实例，把它传递给服务器
var socket = require('socket.io').listen(server);

// 添加一个连接监听器
socket.on('connection', function(client){
// 成功！现在开始监听接收到的消息
    console.log("connected");
    client.on('message',function(data){
        console.log('Received message from client!',data);
        client.broadcast.emit('server message',{text:data.text});
    });

    client.on('disconnect',function(){
        //clearInterval(interval);
        console.log('Server has disconnected');
    });
    //模拟触发数据
    // var interval= setInterval(function() {
    //     //client.send('This is a message from the server! ' + new Date().getTime());
    //     //发送给单个用户
    //     //client.emit('message',{text:'你上线了'});
    //     //发送给所有用户
    //     client.broadcast.emit('message',{text:'你的好某XXX上线了'});
    // },5000);
});

index.html页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Socket.IO Example</title>
</head>
<body>
<textarea id="msgbox"></textarea>
<input type="button" value="send" id="sendBtn">
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('ws://localhost:8080');
    //前端监听信息
    socket.on('server message',function(data){
        console.log(data.text);
    })
    //前端发送信息
    document.getElementById("sendBtn").onclick = function () {
        var info = document.getElementById("msgbox").value;
        //console.log(info);
        socket.emit("message",{text:info});
    }
</script>

</body>
</html>

关于websocket的代码，实现发送信息和监听信息（前端 后端（node.js））的更多相关文章

  1. RabbitMQ 入门系列：8、扩展内容：接收信息时：可否根据RoutingKey过滤监听信息，答案是不能。

    系列目录 RabbitMQ 入门系列:1.MQ的应用场景的选择与RabbitMQ安装. RabbitMQ 入门系列:2.基础含义:链接.通道.队列.交换机. RabbitMQ 入门系列:3.基础含义: ...

  2. c# 获取移动硬盘信息、监听移动设备的弹出与插入事件

    原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...

  3. iOS 原生模块 给 Javascript(ReactNative) 发送事件 (通知监听)

    官方中文文档是这样描述的:   就给我们这几句话 就打发我们了. 按照上面的写法,根本不知道  - (void)calendarEventReminderReceived:(NSNotificatio ...

  4. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  5. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  6. 使用yield生成器，用Python实现用户对用户输入信息的监听和过滤

    # -*- coding:utf-8 -*-'''''''''生成器是一次生成一个值的特殊类型函数.可以将其视为可恢复函数.调用该函数将返回一个可用于生成连续 x 值的生成[Generator],简单 ...

  7. JavaEE开发之Spring中的事件发送与监听以及使用@Profile进行环境切换

    本篇博客我们就来聊一下Spring框架中的观察者模式的应用,即事件的发送与监听机制.之前我们已经剖析过观察者模式的具体实现,以及使用Swift3.0自定义过通知机制.所以本篇博客对于事件发送与监听的底 ...

  8. Node.js 0.12: 正确发送HTTP POST请求

    Node.js 0.12: 正确发送HTTP POST请求 本文针对版本:Node.js 0.12.4 之前写过一篇Node.js发送和接收HTTP的GET请求的文章,今天再写一篇,讲发送POST的请 ...

  9. Vue+node.js+express+mysql实例---对图书信息进行管理

    一个简单的 CURD 实例 ---对图书信息进行管理 目录 1 开发环境 1.1 前端开发环境 1.2 后端开发环境 2 数据库设计和创建 2.1 数据库和表设计 2.2 book 表设计 2.3 s ...

随机推荐

  1. Centos7 编译安装 Nginx、MariaDB、PHP

    前言 本文主要大致介绍CentOS 7下编译安装Nginx.MariaDB.PHP.面向有Linux基础且爱好钻研的朋友.技艺不精,疏漏再所难免,还望指正. 环境简介: 系统: CentOS 7,最小 ...

  2. In-App Purchase Programming Guide----（二) ---- Designing Your App’s Products

    Designing Your App’s Products A product is something you want to sell in your app’s store. You creat ...

  3. zabbix3.4自定义监控

    zabbix的服务器.客户端都已经部署完成,监控正常,用的是微信报警: 现在想监控一台Linux服务器(172.16.0.56)的剩余内存,在小于一定值的时候就报警: 1.在172.16.0.56上, ...

  4. 死磕了一题模拟 A掉的时候我是爽的

    ZOJ 3490 没有题解. 一句话,要么贴代码,要么自己打. #include<cstdio> #include<iostream> #include<vector&g ...

  5. poj1664【DFS】

    思路:搜一下,还想多了,记得以前做过把一个数搞成几个数的相加组合,然后这题无非就是多了个组合的个数<=m的,那么只要多加一个条件,当num>m的时候也return掉就好了. //#incl ...

  6. hdoj1465【错排公式(直接水过)】

    //注意会爆 int #include <bits/stdc++.h> using namespace std; typedef long long LL; typedef unsigne ...

  7. bzoj 3173: [Tjoi2013]最长上升子序列【dp+线段树】

    我也不知道为什么把题看成以插入点为结尾的最长生生子序列--还WA了好几次 先把这个序列最后的样子求出来,具体就是倒着做,用线段树维护点数,最开始所有点都是1,然后线段树上二分找到当前数的位置,把这个点 ...

  8. 修改static控件背景颜色和文字颜色

    当 static 控件或具有 ES_READONLY 风格的 edit 控件被绘制时,会向父窗口发送 WM_CTLCOLORSTATIC 消息.如果我们在窗口过程中处理该消息,就必须返回一个画刷句柄, ...

  9. IDEA Maven Hadoop调试hdfs程序

    IDEA 远程调试 Hadoop 两大特色:一是采用maven的pom配置:二是直接连接hdfs:9000端口,无须另外在服务端配置参数. 其实内容包含了两种方式:本地与远程调试.这里仅仅只是使用远程 ...

  10. AtCoder Regular Contest 076 E - Connected?

    题目传送门:https://arc076.contest.atcoder.jp/tasks/arc076_c 题目大意: 给定一个\(R×C\)的矩阵,然后给定\(N\)对点,每对点坐标为\((X_{ ...