三重水的博客

在变化当中不断记录自己，充实自己，浏览自己

Websocket 聊天室

一、目录结构如下

  • websocket
    • chat.html 聊天客户端代码
    • chat_server.js 服务端代码
    • package.json 包管理文件
    • support.html 检查浏览器是否支持websocket

二、检查浏览器是否支持websocket

代码如下： support.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id=support></div>
<script type="text/javascript">
    if(window.WebSocket){
        document.getElementById("support").innerHTML = "您的浏览器支持HTML5的WebSocket协议";
    }
    else{
        document.getElementById("support").innerHTML = "您的浏览器不支持HTML5的WebSocket协议";
    }
</script>
</body>
</html>

三、创建 websocket node.js端服务器

  • 安装依赖包 nodejs-websoket 依赖包官方地址可以移步这里

    npm install nodejs-websoket –save-dev

  • 新建服务端代码文件 chat_server.js 目录为：websocket/chat_server.js chat_server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var ws = require("nodejs-websocket"); //获取nodejs-websocket模块
var server = ws.createServer(function(conn){ //创建websocket服务器
        conn.sendText('您好! 欢迎您加入聊天室！'); //向接入的客户端发送消息
        console.log("有新聊天者加入");
        conn.on("text", function(msg){//监听是否有客户端发送消息过来
                broadcast(conn.server, msg);//向所有客户端广播消息
                console.log(msg);
            });
        conn.on("close", function(code, reason){//监听客户端关闭连接
                console.log(code+" 连接关闭了");//关闭掉浏览器窗口断开连接code为1001，通过代码断开连接code：1005
            })
    }).listen(8000, function(){//监听8000端口
            console.log("Hello,Server is Running:8000");
        });
function broadcast(server, msg){
        server.connections.forEach(function(conn){
                conn.sendText(msg);
            })
    }
  • 新建客户端代码文件 chat.html 目录为 websocket/chat.html

chat.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>聊天室</title>
</head>
<body>
<input type="button" value="断开链接" onclick="disconect();">
姓名：<input type="text" name="msgname" id="msgname">
聊天内容：
<input type="text" name="msgtxt" id="msgtxt" maxlength="100">
<input type="button" id=enter value="发言" onclick="send_msg();">
<br>
<div id="valueLabel"></div>
<script>
    var s = new WebSocket("ws://localhost:8000/");//链接websocket服务器
    var valueLabel = document.getElementById('valueLabel');
    s.onopen = function(event) {//当链接成功时
        valueLabel.innerHTML="<p>已经链接到WebSocket服务器</p>";
        console.log("链接成功了！！！");
    };
    s.onmessage = function(event) {//收到服务器传来信息的事件处理
        valueLabel.innerHTML +="<p>"+event.data+" "+CurentTime()+"</p>";
    };
    s.onclose = function(event) { //链接关闭时的事件处理
        console.log("连接关闭了！！！");
        console.log("readyState " + s.readyState);
    };
    function send_msg() {//向服务器发出信息
        var msgName = document.getElementById('msgname').value;
        var msg = document.getElementById('msgtxt').value;
        s.send(msgName + " say: " + msg + " ========= " + CurentTime());
    }
    function disconect() {//断开链接的函数
        s.close();// 关闭连接
        valueLabel.innerHTML = "<p>已经断开了跟WebSocket服务器的链接</p>";
        alert("断开了！");
    }
    function CurentTime() {// 获取当前时间的函数
        return (new Date().toLocaleString());
    }
</script>
</body>
</html>

启动服务器

node chat_server.js

看到返回以下信息即成功

Hello,Server is Running:8000

然后在浏览器中打开客户端页面，即可加入聊天，打开多少个都没问题，赶紧试试吧。。。 image

评论