Node 通过WeSocket实现即时通讯

WeSocket实现即时通讯

  • 前端代码
  • 后台node代码
    • 第一种通过ws模块实现
    • 第二种通过nodejs-websocket模块实现

前端代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        #kuang {
            text-align: center;
            margin-top: 200px;
        }

        #mess {
            text-align: center
        }

        .value {
            width: 200px;
            height: 200px;
            border: 1px solid;
            text-align: center;
            line-height: 200px;
            display: inline-block;
            cursor: pointer;
        }
    style>
head>

<body>
    <div id="mess">正在连接...div>
    <div id="kuang">
        <span style="display: block">点击发送span>
        <div class="value">1111111111111111111div>
        <div class="value">2222222222222222222div>
        <div class="value">3333333333333333333div>
    div>

    <script>
        var mess = document.getElementById("mess");
        if (window.WebSocket) {
            var ws = new WebSocket('ws://localhost:8080');

            ws.onopen = function (e) {
                console.log("连接服务器成功");
                ws.send("开始");  //向后台发送数据
            }
            ws.onclose = function (e) {
                console.log("服务器关闭");  //当链接关闭的时候触发
            }
            ws.onerror = function () {
                console.log("连接出错");  //错误情况触发
            }

            ws.onmessage = function (e) {  //后台返回消息的时候触发
                console.log(e.data);
                mess.innerHTML = "连接成功"
                document.querySelector("#kuang").onclick = function (e) {
                    if (e.target.nodeName.toLowerCase() == 'div') {
                        ws.send(e.target.innerHTML);
                    }
                }
            }
        }
    script>
body>
html>

后台node代码

第一种通过ws模块实现

安装 ws cnpm install ws --save
参考文档
代码是

var WebSocket = require('ws');
console.log('开始建立连接...');
var wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {

    ws.on('message', function incoming(message) {
        ws.send(message);
        console.log("收到的信息为:" + message);
    });
    ws.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    ws.on("error", function (code, reason) {
        console.log("异常关闭")
    });
});
console.log("WebSocket建立完毕");

第二种通过nodejs-websocket模块实现

安装 nodejs-websocket cnpm install nodejs-websocket --save
代码是

var wss = require("nodejs-websocket");
console.log("开始建立连接...")

var server = wss.createServer(function(ws){
    ws.on("text", function (str) {
        console.log("收到的信息为:"+str)
        ws.send(str)
    })
    ws.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    ws.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8080)
console.log("WebSocket建立完毕")

你可能感兴趣的:(Node 通过WeSocket实现即时通讯)