超简单实例使用websocket进行server和client实时通信

75 阅读 0 评论 50 点赞

我是靠谱客的博主高兴蜜粉，这篇文章主要介绍超简单实例使用websocket进行server和client实时通信，现在分享给大家，希望可以做个参考。

server端

复制代码

//app.js
var ws = require('nodejs-websocket');

var server = ws.createServer(function(conn){
    console.log('connected');
    conn.on('text',function(str){
        console.log(str);
        //conn.sendText(str);//将接收道德str用sendText方法传给接收到的一个连接
        //boardcast(str);//调用广播方法将节后到的传给所有的浏览器

/**
 * 这个connections是一个数组包含我们所有的连接
 */
//我们来写一个广播吧
function boardcast(str){
    server.connections.forEach((conn) => {
        conn.sendText(str);
    });
}

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
45
//app.js
var ws = require('nodejs-websocket');

var server = ws.createServer(function(conn){
    console.log('connected');
    conn.on('text',function(str){
        console.log(str);
        //conn.sendText(str);//将接收道德str用sendText方法传给接收到的一个连接
        //boardcast(str);//调用广播方法将节后到的传给所有的浏览器

        var data = JSON.parse(str);
        switch (data.type){
            case 'chat':
                //boardcast(conn.nickname + '说:' + data.text);
                boardcast(JSON.stringify({name:conn.nickname,text:conn.nickname + '说:' + data.text}));
                break;                
            case 'setname':
                conn.nickname = data.name;
                //boardcast(data.name+'加入了房间');
                boardcast(JSON.stringify({text:data.name+'加入了房间',name:conn.nickname}));
                break;
        }
            
    });
    // setTimeout(function(){
    //     conn.sendText('来自服务端的消息!');
    // },3000);
    conn.on('close',function(){
        boardcast(JSON.stringify({name:conn.nickname,text:conn.nickname+'退出了房间'}));
    });
    conn.on('error',function(err){
        console.log(err);
    });
}).listen(2333);

/**
 * 这个connections是一个数组包含我们所有的连接
 */
//我们来写一个广播吧
function boardcast(str){
    server.connections.forEach((conn) => {
        conn.sendText(str);
    });
}

复制代码

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <title>测试一下websocket</title>
  </head>
  <body>
    
  <input id='name' type='text'>
  <button id='setname' type='button'>设置</button>

<input id='text' type='text'>
    <button id='btn' type='submit'>发送</button>
    <div id="root"></div>
    <script>
        var ws = null;
        document.getElementById('setname').onclick = function() {
          var name = document.getElementById('name').value;
          if(name === null){
            alert('注意用户名不能为空');
          }
          console.log(name);
          ws =new WebSocket('ws://localhost:2333');
          ws.onopen = function (){          
            ws.send(JSON.stringify({name:name,type:'setname'}));
            document.getElementById('btn').onclick = () => {
              //console.log(document.getElementById('text').value);
              ws.send(JSON.stringify({text:document.getElementById('text').value,type:'chat'}));
            }  
          }
          ws.onmessage = function (e){
          //console.log(e.data);
            //document.body.innerHTML += '<p>'+e.data + '</p>';
            // var p =document.createElement('p');
            // p.innerHTML = e.data;
            document.getElementById('root').appendChild(createChatPanel(JSON.parse(e.data)));
          }
           document.getElementById('setname').style.display = 'none';
        }
        function createChatPanel(data){
          var name = data.name;
          var text = data.text;
          var div = document.createElement('div');
          var p1 = document.createElement('p');
          var p2 = document.createElement('p');
          p1.innerHTML = name + ":" + (new Date()).toString();
          p2.innerHTML = text;
          p1.style.color = 'green';
          div.appendChild(p1);
          div.appendChild(p2);
          return div;
          
        }
    </script>

</body>
</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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <title>测试一下websocket</title>
  </head>
  <body>
    
  <input id='name' type='text'>
  <button id='setname' type='button'>设置</button>

    <input id='text' type='text'>
    <button id='btn' type='submit'>发送</button>
    <div id="root"></div>
    <script>
        var ws = null;
        document.getElementById('setname').onclick = function() {
          var name = document.getElementById('name').value;
          if(name === null){
            alert('注意用户名不能为空');
          }
          console.log(name);
          ws =new WebSocket('ws://localhost:2333');
          ws.onopen = function (){          
            ws.send(JSON.stringify({name:name,type:'setname'}));
            document.getElementById('btn').onclick = () => {
              //console.log(document.getElementById('text').value);
              ws.send(JSON.stringify({text:document.getElementById('text').value,type:'chat'}));
            }  
          }
          ws.onmessage = function (e){
          //console.log(e.data);
            //document.body.innerHTML += '<p>'+e.data + '</p>';
            // var p =document.createElement('p');
            // p.innerHTML = e.data;
            document.getElementById('root').appendChild(createChatPanel(JSON.parse(e.data)));
          }
           document.getElementById('setname').style.display = 'none';
        }
        function createChatPanel(data){
          var name = data.name;
          var text = data.text;
          var div = document.createElement('div');
          var p1 = document.createElement('p');
          var p2 = document.createElement('p');
          p1.innerHTML = name + ":" + (new Date()).toString();
          p2.innerHTML = text;
          p1.style.color = 'green';
          div.appendChild(p1);
          div.appendChild(p2);
          return div;
          
        }
    </script>

  </body>
</html>