node-webSocket(即时通讯)实现简易聊天室

socket (套接字 包含数据内容) 实现网络通信

网络上的两个程序 通过一个双向的通信连接 实现数据的交互,这个链接的一端称之为 socket

服务器端 socket 功能

  • 1、创建 服务器 绑定 IP + 端口 监听端口
  • 2、监听 客户端的链接
  • 3、监听 客户端发来的消息
  • 4、把来自客户端的消息 转发给其他的在线客户端
  • 5、监听 客户端的关闭

客户端 socket 功能

  • 1、创建 客户端 socket
  • 2、连接服务器 的 socket
  • 3、发送消息 给 服务器
  • 4、接收服务器发来的消息
  • 5、监听 服务器 关闭 或者 异常

双向通信 + 互相监听

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            border: 1px #000 solid;
            overflow: auto;
        }
        #xx {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <div id="xx">
        **<input type="text" name="" id="txt"><input type="button" value="发送" id="btn">**
    </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">**
</script>
<script>
    var name = '卡卡西';
    var str = '';
    var scoket = new WebSocket('ws://192.168.53.212:10086');**
    scoket.onopen = function () {
        scoket.send(`我是${name},我上线了`);
    }
    **scoket.onmessage = function (message) {
        str = `<p>${message.data}</p>`;**
        $('.box').html($('.box').html() + str)**
    }
    // 监听 服务器端 关闭  
    scoket.onclose = function () {
        console.log("服务器已经关闭停止服务...")
    }
    scoket.onerror = function () {**
        **console.log("服务器被黑了...")
    }
    $('#btn').click(function () {**
        scoket.send(`${name}说:` + $('#txt').val());
    })
</script>

</html>

服务端代码

const ws = require('ws');
const WebSocketServer = ws.Server;
// 1. 创建 socket 2. 监听端口 
const wss = new WebSocketServer({
    port: 10086
});
var count = 100;
var info = "WUHAN2002__";
var obj = {};
// 3. 监听客户端的链接
wss.on('connection', function (ws) {
    // socket 客户端链接 对象 socket 
    count++;
    ws.name = info + count;
    obj[ws.name] = ws;
    ws.on('message', function (message) {
        fn(message)
    })
    ws.on('close', function () {
        console.log(ws.name + '我下线了...');
        delete obj[ws.name];
        fn(ws.name + '我下线了...')
    })
});
function fn(message) {
    for (var i in obj) {
        obj[i].send(message);
    }
}
posted @ 2020-07-22 13:01  飘逸_winxin  阅读(399)  评论(0)  编辑  收藏  举报