zoukankan      html  css  js  c++  java
  • 关于websocket的代码,实现发送信息和监听信息(前端 后端(node.js))

    文件结构

    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>
  • 相关阅读:
    破圈法求最小生成树+最小生成树与最短路径问题
    相信你们的锐意前行,终将成就更美好的未来
    “基于模块化自动驾驶底盘的PIX移动空间”发布
    Node:通过 Uglify 压缩小程序代码
    CSS 实用技巧
    websercie调用方式
    IDEA 添加tomcat启动后控制台乱码解决方案
    对象转json串,json转对象
    js 判断一个变量是数组还是对象
    @Transactional 锁表吗?关于Spring注解@Transactional和SQL for update 的一些观点
  • 原文地址:https://www.cnblogs.com/zhaodagang8/p/8575128.html
Copyright © 2011-2022 走看看