• 技术文章 >web前端 >js教程

    node.js 用socket实现聊天实例分享

    小云云小云云2018-01-15 13:23:23原创820
    本文主要介绍了node.js 用socket实现聊天的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

    服务器搭建

    app.js


    const http = require("http");
    const express = require("./express");
    
    //创建一个服务
    const server = http.createServer(express);
    
    //监听服务端口
    server.listen(8001,()=>{
      console.log("服务端已经启动,请访问 http://localhost:8001");
    });

    express.js


    const url=require("url");
    const fs=require("fs");
    
    function express(req,res){
      var urlObj=url.parse(req.url);
      //console.log(urlObj);
    
      var filePath="./www"+urlObj.pathname;
      var content="not found";
      if(fs.existsSync(filePath)){
        content=fs.readFileSync(filePath);
      }
      
      res.end(content.toString());
    }
    
    
    module.exports=express;

    index.html


    <!DOCTYPE html>
    <html lang="en">
      <head>
       <meta charset="utf-8"/>
        <title>Socket.IO chat</title>
        <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { font: 13px Helvetica, Arial; }
         form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
         form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
         form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
         #messages { list-style-type: none; margin: 0; padding: 0; }
         #messages li { padding: 5px 10px; }
         #messages li:nth-child(odd) { background: #eee; }
        </style>
       </head>
       <body>
        <ul id="messages"></ul>
        <form action="">
         <input id="m" autocomplete="off" /><button>Send</button>
        </form>
    
        <script src="js/lib/jquery-1.11.1.js"></script>
        <script src="js/lib/socket.io.js"></script> 
        <script src="js/index.js"></script>
       </body>
    </html>

    客户端服务搭建与服务端通信

    我们要建立服务端socket请求连接


    io.on('connection', function(socket){
      console.log('a user connected');
    
      //断开连接
      socket.on('disconnect', function(){
        console.log('user disconnected');
      });
    });

    index.js


    //客户端建立连接 
    var socket = io(); 
    客户端向服务端发送请求
    index.js
    
    $('form').submit(function(){
      //触发事件
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
     });

    app.js


    //接收客户端的信息
    socket.on('chat message', function(msg){
      console.log('message: ' + msg);
    });

    将服务端的数据广播到客户端去


    socket.on('chat message', function(msg){
        console.log('message: ' + msg);
    
        socket.broadcast.emit("clientE",msg);
      });

    客户端接收服务端广播出来的数据


    socket.on('clientE', function(msg){
      $('#messages').append($('<li>').text(msg));
    });

    相关推荐:

    nodejs基于WS模块实现WebSocket聊天功能

    jquery仿微信聊天界面实例分享

    实例详解vue组件父子间通信之聊天室

    以上就是node.js 用socket实现聊天实例分享的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript node.js socket
    上一篇:vue获取input输入值详解 下一篇:Bootstrap图片轮播效果实现方法
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 深入了解React中的任务调度算法• 什么是闭包?聊聊javascript中闭包,看看闭包有哪些作用?• JavaScript常见的Number对象汇总• JavaScript原型与原型链知识点详解• angular如何进行性能优化?变更检测方式浅析
    1/1

    PHP中文网