使用WebSocket + Node.js搭建简单版聊天室

效果

WebSocket 对象提供了用于创建和管理WebSocket连接，以及可以通过该连接发送和接收数据的 API。

属性：

• WebSocket.binaryType
  使用二进制的数据类型连接

• WebSocket.bufferedAmount （只读）
  未发送至服务器的字节数

• WebSocket.extensions （只读）
  服务器选择的扩展

• WebSocket.onclose
  用于指定连接关闭后的回调函数

• WebSocket.onerror
  用于指定连接失败后的回调函数

• WebSocket.onmessage
  用于指定当从服务器接受到信息时的回调函数

• WebSocket.onopen
  用于指定连接成功后的回调函数

• WebSocket.protocol （只读）
  服务器选择的下属协议

• WebSocket.readyState （只读）
  当前的链接状态

• WebSocket.url （只读）
  WebSocket 的绝对路径

方法

• WebSocket.close([code[, reason]])
  关闭当前链接
• WebSocket.send(data)
  向服务器发送数据

好吧！！！ 一本正经的抄MDN文档

开始摸手

安装node不提。

1、安装WebSocket

$ npm install ws

2、创建package.json （那些选项不懂可以Google）

$ npm init

3、新建index.html 用于访问
4、新建index.js 用于写node服务器

文件

index.js文件

const WebSocket = require('ws');// 导入WebSocket模块:
const WebSocketServer = WebSocket.Server;// 引用Server类:
const wss = new WebSocketServer({ port: 3000 });// 实例化: 端口3000

index.html

 var sock = new WebSocket('ws://localhost:3000');
   sock.onopen = (params) => {
      console.log('连接成功！');
      console.log(params);
    }
    sock.onerror = (error) => {
      console.log('连接失败！');
      console.log(error);
    }

运行

$ node index.js

在浏览打开index.html文件
打开控制台 ==> Network ==> WS
如下图

控制台.png

走到这一步说明你已经成功连接了吧！！

接下来使用send()传输数据。

1、客户端 ==> 服务器端

index.html

  var sock = new WebSocket('ws://localhost:3000');
    sock.onopen = (params) => {
      console.log('连接成功！');
      console.log(params);
      sock.send('我是前台数据')
    }
    sock.onerror = (error) => {
      console.log('连接失败！');
      console.log(error);
    }

index.js //服务器端

const WebSocket = require('ws');// 导入WebSocket模块:
const WebSocketServer = WebSocket.Server;// 引用Server类:
const wss = new WebSocketServer({ port: 3000 });// 实例化: 端口3000
wss.on('connection', function(ws) {
    // 接收客户端数据
    ws.on('message', (message)=> {
      console.log(message); //我是前台数据
    });
  })

看浏览器控制把数据传过去

客户端-控制台

可以看得出控制台打印出，客户端传给后台的数据。

服务器端-控制台

2、客户端 <== 服务器端

一样的操作。直接上代码！
index.html

   sock.onmessage = function (ms) {
      console.log(ms); 
    }

客户端使用onmessage接收数据

index.js

wss.on('connection', function(ws) {
    // 接收客户端数据
    ws.on('message', (message)=> {
      console.log(message);
      ws.send('我是后台数据') //服务器发送数据给客户端
    });

  })

控制台.png

就到这吧！上全代码！！
index.html

  

    

  
  

    
    发送
  

  

index.js

const WebSocket = require('ws');// 导入WebSocket模块:
const WebSocketServer = WebSocket.Server;// 引用Server类:
const wss = new WebSocketServer({ port: 3000 });// 实例化: 端口3000


wss.on('connection', function(ws) {
    // 接收客户端数据
    ws.on('message', (message)=> {
      message = JSON.parse(message)
      if(message.type == 'name'){
        ws.userName = message.data;
        return;
      }
      wss.clients.forEach((client)=>{
        // 过滤相同的消息
        if(client != ws){
          //  ms.send(message)
          client.send(JSON.stringify({
             name: ws.userName,
             data: message.data,  //注意是message
             time:  message.time
           }))
        }
      })
    });
    // 关闭 断开的客户端
    ws.on('close',function () {
      console.log('什么鬼---------');
    })
  });

PS:运行可以打开多个index.html进行操作。
可以下载DEMO 试着运行