webScoket

Posted 2021-01-28 宝2333

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webScoket相关的知识，希望对你有一定的参考价值。

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。

WebSocket 是 html5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

创建简易的聊天室

<!DOCTYPE html> 
<html lang="en"> 
<head>
 <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
　　引入socket.io.js

    <script src="socket.io.js"></script>
    <style>
        body {
            font-size: 14px;
        }
        #content{
            width:300px;
            height:200px;
            border:1px solid red;
            overflow: auto;
        }
        .left{
            text-align: left;
        }
        .right{
            text-align: right;
        }
        #content p{
            border:1px solid green;
            border-radius:10%;
        }
    </style>
</head>

<body>
    <!-- 用户登录 -->
    <p>
        <input type="text" id="userName">
        <button id="login">登录</button>
    </p>

    <!-- 聊天窗口 -->
    <div id="content">

    </div>
    <!-- 发送按钮 -->
    <p>
        <input type="text" id="ipt">
        <button id="send">发送 to who</button>
    </p>

    <button id="clos">断开连接</button>

    <!-- 上线用户列表 -->
    <ul id="list"></ul>
</body>


<script>
    var socket;
    var user = ‘‘;
    var toWho = ‘‘;
    login.onclick = function () {
        socket = io(‘http://localhost:3000‘);
        socket.emit(‘login‘, {userName: userName.value});
        user = userName.value;
        socket.on(‘userList‘, function (data) {
            console.log(data);
            var html = ‘‘;
            for (x in data) {
                html += ‘<li>‘ + data[x] + ‘</li>‘;
            }
            list.innerHTML = html;
        });

        socket.on("send", function (data) {
            content.innerHTML += "<p class=‘left‘>" + data.from + " : " + data.msg + "</p>"
        });

    }

    send.onclick = function () {
        socket.emit(‘send‘, {
            to: toWho,
            from: user,
            msg: ipt.value
        });
        content.innerHTML += "<p class=‘right‘>我:" + ipt.value + "</p>";

    }



    list.onclick = function (e) {
        if (e.target.nodeName == "LI") {
            toWho = e.target.innerHTML;
        }
        send.innerHTML = "发送 to " + toWho;
    }
</script>

</html>

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

var app = http.createServer(function (req, res) {
    if (req.url == ‘/‘) {
        fs.readFile(‘index.html‘, function (err, data) {
            res.end(data);
        });
    } else if (req.url == ‘/socket.io.js‘) {
        fs.readFile("socket.io.js", function (err, data) {
            res.writeHead(200, {
                "Content-type": "text/javascript"
            })
            res.end(data);
        });
    } else {
        res.end(‘‘);
    }
}).listen(3000);
console.log(‘server is success‘);





var ws = io(app);
var userObj = {};

ws.on(‘connection‘, function (socket) {
    socket.on(‘login‘, function (data) {
        userObj[data.userName] = socket;
        var arr = [];
        for (var i in userObj) {
            arr.push(i);
        }
        ws.emit("userList", arr);
    });


    socket.on(‘send‘, function (data) {
        userObj[data.to].emit(‘send‘, data);
    });

});





// 全体广播，发送userList事件
// ws.emit("userList",arr)
// 全体广播除了自己
// socket.broadcast.emit("userList",arr);
// 只发给自己
// socket.emit("userList",arr)

以上是关于webScoket的主要内容，如果未能解决你的问题，请参考以下文章

Webscoket

如何来实现IM？～webScoket 服务端开发

ActiveMQ结合WebScoket应用例子以及介绍

前端随心记---------Ajax，Comet，Websocket