socket-io及时通讯，简易聊天

作者: 时间_7436 | 来源:发表于2019-12-09 10:05 被阅读0次

socket-io及时通讯，简易聊天
[开源] .NETCore websocket 即时通讯组件--
websocket框架socket-io-java使用小结
iOS开发（环信及时通讯）-获取聊天记录
及时通讯视频直播
iOS及时通讯那点事儿(一)
Qt TCP通讯简易Demo
集成环信即时通讯云V3.0遇到的坑点
xmpp+openfire
iOS 即时通讯IM 及webSocket

package.json

{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
  "express": "^4.17.1",
  "socket.io": "^2.3.0"
}
}

文件目录

1575857003(1).png

node 服务端 app.js

var http = require("http").createServer();
var io = require("socket.io")(http);

let onlineUsers = {};
let onlineCount = 0;
let speakvallist = [];

io.on("connection", function(socket) {
socket.on("login", function(obj) {
    //将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
    socket.name = obj.userid;

    //检查在线列表，如果不在里面就加入
    if (!onlineUsers.hasOwnProperty(obj.userid)) {
        onlineUsers[obj.userid] = obj.username;
        //在线人数+1
        onlineCount++;
    }
    //向所有客户端广播用户加入
    io.emit("login", {
        onlineUsers: onlineUsers,
        user: obj,
        onlineCount: onlineCount
    });
    console.log(obj.username + "加入了聊天室");
});
socket.on("disconnect", function() {
    onlineCount--;
    // console.log(socket.name, !onlineUsers.hasOwnProperty(socket.name));
    if (onlineUsers.hasOwnProperty(socket.name)) {
        var obj = { userid: socket.name, username: onlineUsers[socket.name] };
        // console.log(onlineUsers[socket.name] + "断开链接");
        delete onlineUsers[socket.name];
        io.emit("logout", {
            onlineUsers: onlineUsers,
            user: obj,
            onlineCount: onlineCount
        });
    }
    console.log(socket.name + "断开链接");
});
socket.on("speak", a => {
    speakvallist.push(a);
    console.log(socket.name);
    io.emit("speak", {
        username: onlineUsers[socket.name],
        speak: a
    });
});
});

http.listen(4000, function() {
console.log("listening on *:4000");
});

客户端 index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport" />
<title>T</title>
<script src="./socket-io/socket.io.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    #room {
        display: none;
    }
    
    ul {
        list-style: none;
    }
    
    .speak>li {
        margin-bottom: 12px;
        color: rgb(233, 67, 136);
        font-size: 12px;
    }
    
    .speak>li:nth-child(2n) {
        background-color: #eee;
    }
    
    .speak>li>p {
        color: #333;
        font-size: 16px;
    }
</style>
</head>

<body>
<div id="loginbox">
    <div style="width:260px;margin:200px auto;">
        请先输入你在聊天室的昵称
        <br />
        <br />
        <input type="text" style="width:180px;" placeholder="请输入用户名" id="login" />
        <input type="button" style="width:50px;" value="提交" onclick="usernameSubmit()" />
    </div>
</div>

<div id="room">
    <header>
        聊天室 在线人数 <span id="number"></span> 姓名
        <span id="username"></span>
    </header>
    <ul class="record" style="margin-bottom:80px"></ul>
    <div style="width:260px;margin:80px auto;">
        <br />

        <br />
        <p>聊天记录</p>
        <ul class="speak"></ul>

        <input type="text" style="width:180px;" placeholder="聊天" id="speak" />
        <input type="button" style="width:50px;" value="提交" onclick="useresc()" />
    </div>
</div>

<script>
    socket = io.connect("http://localhost:4000");

    function usernameSubmit() {
        let content = document.querySelector("#login").value;

        socket.on("login", o => {
            document.querySelector("#username").innerHTML = o.user.username;
            document.querySelector("#loginbox").style.display = "none";
            document.querySelector("#room").style.display = "block";
        });
        //告诉服务器端有用户登录
        socket.emit("login", {
            userid: new Date(),
            username: content
        });
        //监听新用户登录
    }
    socket.on("login", function(o) {
        updateSysMsg(o, "login");
    });
    socket.on("logout", function(o) {
        updateSysMsg(o, "logout");
    });
    let record = document.querySelector(".record");
    let number = document.querySelector("#number");

    function updateSysMsg(v, login) {
        console.log(v);
        let li = document.createElement("li");
        if (login == "login") {
            li.innerHTML = v.user.username + "加入了聊天室";
        } else {
            li.innerHTML = v.user.username + "退出了聊天室";
        }
        record.appendChild(li);
        number.innerHTML = v.onlineCount;
    }
    let speakval = document.querySelector("#speak");
    let speakul = document.querySelector(".speak");

    function useresc() {
        socket.emit("speak", speakval.value);
        console.log(speakval.value);
    }
    socket.on("speak", speak => {
        // speak
        console.log(speak);
        let li = document.createElement("li");
        li.innerHTML = `${speak.username}<p>${speak.speak}</p>`;
        speakul.appendChild(li);
    });
</script>
</body>

</html>