WebSocket学习(四)——使用WebSocket实现聊天室

最新推荐文章于 2024-07-31 10:44:57 发布

小小小西瓜_

最新推荐文章于 2024-07-31 10:44:57 发布

阅读量928

点赞数

分类专栏： webSocket 文章标签：聊天 nodejs websocket

本文链接：https://blog.csdn.net/qq_20367813/article/details/78021222

版权

webSocket 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

前面说了用nodejs搭建WebSocket服务器，实现了前后台的数据交换，然后就可以想到我们用WebSocket实现一个简单的聊天室

1、先搭建一个服务器吧(nodejs实现)，z直接上代码了

wsServer.js

// 引入WebSocket模块
var ws = require('nodejs-websocket')

var PORT = 3000
var clientCount = 0

var server = ws.createServer(function(conn){
    console.log('New connection')
    
    // 给每个用户取名字
    clientCount++
    conn.nickname = 'user' + clientCount

    // 将消息写成一个对象,传到前台是一个消息对象而不只是消息本身
    var mes = {}
    mes.type = "enter"
    mes.data = conn.nickname + 'come in'
    // JSON.stringify()把对象转化为一个字符串发送到前台

    // 通知用户上线
    broadcast(JSON.stringify(mes))

    // 收到客户端消息
    conn.on("text",function(str){
        console.log("Received"+str)
        // conn.sendText(str.toUpperCase()+"!!!") //大写收到的数据
        var mes = {}
        mes.type = "message"
        mes.data = conn.nickname + 'says: ' + str
        broadcast(JSON.stringify(mes))  
    })
    conn.on("close",function(code,reason){
        console.log("connection closed")
       
        var mes = {}
        mes.type = "leave"
        mes.data = conn.nickname + 'left'
        
        broadcast(JSON.stringify(mes))
    })
    conn.on("error",function(err){
        console.log("handle err")
        console.log(err)
    })
}).listen(PORT)

console.log('websocket server listening on port ' + PORT)

// 广播消息
function broadcast(str){
    // server.connections取到所有的连接，循环发送给所有人
    server.connections.forEach(function(connection){
        connection.sendText(str)
    })
}

就是有几点要注意：1、把消息弄成了一个对象（我们要知道消息的类型Type如上线下线普通消息，要知道消息的数据）

2、因为消息是一个对象，所以发送时要用JSON.stringify（mes）把消息转化为一个字符串才能发送

3、聊天室是个群聊，所以有个广播消息的函数，遍历连接一个个发送

2、然后前台代码

index.html

<!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>WebSocket</title>
</head>
<body>
    <h1>Chat Room</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        // //官方示例的服务器
        // var WebSocket = new WebSocket("ws://echo.websocket.org");
        // wsServer搭建的服务器
        var WebSocket = new WebSocket("ws://localhost:3000/");
        
        //把接收的数据显示到界面
        function showMessage(str,type){
            var div = document.createElement('div');
            div.innerHTML = str;
            if(type == "enter"){
                div.style.color = 'blue';
            }else if(type == "leave"){
                div.style.color = "red"
            }
            document.body.appendChild(div)
        }

        // 连接到服务器后
        WebSocket.onopen = function(){
            console.log('websocket open');
            // 点击之后发送
            document.getElementById("sendBtn").onclick = function(){
                var txt = document.getElementById("sendTxt").value;
                if(txt){        // 文本不为空发送
                    WebSocket.send(txt);
                }
            }
        }

        // 服务器关闭时
        WebSocket.onclose = function(){
            console.log('websocket close');
        }

        // 接收到服务器消息时
        WebSocket.onmessage = function(e){
            console.log(e.data);

            // 把消息字符串转回为一个对象
            var mes = JSON.parse(e.data)
            showMessage(mes.data,mes.type);
        }

    </script>
</body>
</html>

和上篇文章一样，只不过接收了消息的类型，因此写了个showMessage（str,type）方法对不同的消息显示时间不同

运行注意要先node wsSocket启动服务器，然后打开几个html页面就可以看效果了