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

来源：互联网发布：js将字符串向下取整编辑：程序博客网时间：2024/06/08 18:49

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

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

wsServer.js

// 引入WebSocket模块var ws = require('nodejs-websocket')var PORT = 3000var clientCount = 0var 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页面就可以看效果了

阅读全文

0 0