websocket初探学习分享

作者: 一支桨 | 来源:发表于2019-03-23 14:45 被阅读0次

websocket初探学习分享
2020-04-03
websocket初探
websocket初探
Websocket初探
webSocket初探
初探和实现websocket心跳重连
WebSocket 初探(一)
WebSocket 协议初探
好程序员web前端培训分享WebSocket协议

本文主要是使用的心得，参考的网址是websocket，本例中使用的是Websocket-Node 服务器模式，本地全局安装node即可
服务端文件，本文命名为socketserver.js ，代码如下：

var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

wsServer = new WebSocketServer({
    httpServer: server,
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
  return true;
}

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      request.reject();
      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
      return;
    }
    
    var connection = request.accept('echo-protocol', request.origin);
    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

然后编写客户端文件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>
    <script>

var client = new WebSocket('ws://localhost:8080/', 'echo-protocol');
client.onerror = function() {
    console.log('Connection Error');
};

client.onopen = function() {
    console.log('WebSocket Client Connected');
    var contentd = document.getElementById('content');
    const p = document.createElement('p');
    p.innerHTML = `帅哥已上线`;
    contentd.appendChild(p);
};

client.onclose = function() {
    console.log('echo-protocol Client Closed');
};

client.onmessage = function(e) {
    var contentd = document.getElementById('content');
    if (typeof e.data === 'string') {
        const newDate =JSON.parse(e.data)
        const p = document.createElement('p');
        p.innerHTML = newDate.user  + "说：" +newDate.sendVal
        contentd.appendChild(p)
    }
};

function send(){
    var User = document.getElementById('User').value;
    var sendVal = document.getElementById('sendVal').value;
    const data = {
        "user":User,
        'sendVal':sendVal
    }
    sendVal && User ?function(){client.send(JSON.stringify(data));document.getElementById('sendVal').value='';}():alert("所有数据都不能为空")
   
}
</script>
</head>
<body>
    <label for="User">用户名：</label> <input type="text" id="User"><br>
    <label for="sendVal">消息 ：</label> <input type="text" id="sendVal">
    <button onclick="send()">发送</button>
    <div id="content">

    </div>
</body>
</html>

编写完成以后，保存两个文件，在文件所在目录下打开控制台输入