基于NodeJs的websocket简易聊天

WebSocket: 是一种网络通信协议,一般用于消息推送。
Nodejs: 是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境

项目结构

websocketpic.jpeg

1.安装nodejs-websocket

npm install nodejs-websocket

2.服务端代码:新建一个server.js

var ws = require("nodejs-websocket")
var port=3101;
var user=0;

// 创建一个连接
var server = ws.createServer(function (conn) {
    console.log("创建一个新的连接--------");
    user++;
    conn.nickname="user" + user;
    var mes = {};
    mes.type = "enter";
    mes.data = conn.nickname + " 进来啦"
    broadcast(JSON.stringify(mes));

    //向客户端推送消息
    conn.on("text", function (str) {
        console.log("回复 "+str)
        mes.type = "message";
        mes.data = conn.nickname + " 说:    " + str;
        broadcast(JSON.stringify(mes));
    });

    //监听关闭连接操作
    conn.on("close", function (code, reason) {
        console.log("关闭连接");
        mes.type = "leave";
        mes.data = conn.nickname+" 离开了"
        broadcast(JSON.stringify(mes));
    });

    //错误处理
    conn.on("error", function (err) {
        console.log("监听到错误");
        console.log(err);
    });
}).listen(port);

function broadcast(str){
    server.connections.forEach(function(connection){
        connection.sendText(str);
    })
}

3.客户端代码: 新建一个index.html

<body>
        <h1>基于NodeJs的websocket简易聊天 </h1>
        <div id="app">
            <input id="sendMsg" type="text"/>
            <button id="submitBtn">发送</button>
        </div>
        
    </body>
    <script type="text/javascript">
        //在页面显示聊天内容
        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
        var websocket=new WebSocket("ws://localhost:3101");
        //打开websocket连接
        websocket.onopen=function(){
            console.log('已经连上服务器----')
            document.getElementById("submitBtn").onclick=function(){
                var txt=document.getElementById("sendMsg").value;
                if(txt){
                    //向服务器发送数据
                    websocket.send(txt);
                }
            }
        }
        //关闭连接
        websocket.onclose=function(){
            console.log("websocket close");
        }
        //接收服务器返回的数据
        websocket.onmessage=function(e){
            var mes=JSON.parse(e.data)
            showMessage(mes.data,mes.type);
        }
        
    </script>

4.启动服务

node server.js

5.打开静态页面进行聊天

客户端输出:


websocketpic2.jpeg

服务端输出:


websocketpic3.jpeg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。