Node.js开发实战之socket.io初体验-职坐标

Node.js开发实战之socket.io初体验

沉沙 2018-07-09 来源：阅读 556 评论 0

摘要：socket是用来进行客户端和服务器之间进行通信的一门技术。希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

socket是啥

socket是用来进行客户端和服务器之间进行通信的一门技术。比如我们使用的聊天程序，就是直接使用socket来实现的。比如我们访问网站，用的http协议，也是基于socket的进行封装的。大部分项目都是用别人封装好了的协议和库，比如node.js的http，ftp服务。现在socket一般用来做即时性较强的服务。
传统的http服务也可以采用每秒发送一次请求的方式来模拟长连接服务。好处是：不需要了解socket底层技术，可以采用现有的HTTP技术实现。
缺点是：每次HTTP请求完，就会断开服务，不停的请求断开会消耗系统资源。
因此，项目紧急的情况下，可以先使用HTTP，慢慢学会socket技术之后再升级。

socket准备

· npm 安装socket.io express

· html加载 socket.io.js库

socket 服务器端搭建

var app = require("express")();var http = require("http").Server(app);var io = require("socket.io")(http);//socket和http同用一个端口
 
app.get("/",function(req,res){
    res.sendFile(__dirname+"/index.html");
});
http.listen(3000,function(){
    console.log("listenning on :3000");
});
io.on("connection",function(socket){//当有新的用户连接上服务器时触发
    //当有新的用户连接上服务器时触发
    socket.on("disconnect",function(){//当客户端断开连接时触发
 
    });
    socket.on("chat message",function(msg){//自定义接收消息，消息类型为chat message
        console.log("message:"+msg);
        io.emit("chat message",msg);//给所有连接上的用户发送消息
        socket.broadcast.emit("hi");//给除了自己的其他人发送消息
    });
});

网页

<!DOCTYPE html><html lang="zh-cn"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        form input{
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: .5%;
        }
        form button{
            width: 9%;
            padding: 10px;
            border: 0px;
            background-color: green;
        }
 
        form{
            background:#000;
            padding: 10px;
            position: fixed;
            bottom: 0px;
            width: 100%;
        }
        #messages li:nth-child(odd) { background: #eee; }
    </style></head><script src="//192.168.1.100:4000/content/socket.io.js"></script><script src="//192.168.1.100:4000/content/jquery.min.js"></script><script>
    $(function(){
        var socket = io();//可以使用参数，连接到指定的服务器，也可以不带参数，默认使用和http一样的服务器和端口号
        $("form").submit(function(){
            socket.emit("chat message",$("#m").val());
            $("#m").val('');
            return false;
        });
        socket.on("chat message",function(msg){
            $("#message").append($("<li>").text(msg));
        });
    });</script><body>
    <ul id="message"> </ul>
    <form action="">
        <input type="text" id="m" autocomplete="off"> <button>send</button>
    </form></body></html>

本文由职坐标整理发布，学习更多的Node.js相关知识，请关注职坐标WEB前端Node.js频道！

前端知识分享前端编码规范 web前端知识体系

本文由 @沉沙发布于职坐标。未经许可，禁止转载。