浅尝websocket,node做websocket实现聊天室

做一个websocket简单的尝试,node和客户端能够成功链接并且能正常接收发送数据。

一.websocket简介

WebSocket是基于TCP的应用层协议,用于在C/S架构的应用中实现双向通信。
需要特别注意的是:虽然WebSocket协议在建立连接时会使用HTTP协议,但这并不意味着WebSocket协议是基于HTTP协议实现的。
浅尝websocket,node做websocket实现聊天室_第1张图片

二.node实现

node 不能直接使用websocket,需要安装支持websocket的包,这里用的是nodejs-websocket
安装:npm install nodejs-websocket


const ws = require("nodejs-websocket");

//定义一个arr,用于收集多用户信息
const arr = {}; 

ws.createServer(function (socket) { //连接成功的回调

	//监听数据,当客户端传来数据时的操作
    socket.on("text", function (str) {
      var data = JSON.parse(str); //数据只能是以字符串或buffer形式传递,所以这里要转换成JSON;
      if (arr[data.username]) { //如果不是第一次连接
      
		//将用户发来的信息对所有用户发一遍
        for (var item in arr) { 
          arr[item].sendText(
            JSON.stringify({
              username: data.username,
              text: data.mes,
            })
          );
        }
      } else { //如果是第一次连接
        arr[data.username] = socket;
      }
    });
  })
  .listen(4000);

三.客户端实现

新建一个html文件

	DOCTYPE html>

<head>
    <title>

    title>
    <style>
        .chatContext {
            width: 100px;
            height: 300px;
            border: 1px solid #ddd;
        }
    style>
head>

<body>
    <div id="chatContext">div>
    <input id="input" />
    <button id="send">发送button>
    <script type="text/javascript">
        var localChat = [];
		
		//这里对localChat 的push方法进行了重写,只要localChat 有数据push进来就对#chatContext重新渲染
        var arrayProto = Array.prototype;
        var arrayMethod = Object.create(arrayProto);
        arrayMethod.push = function () {
            var original = arrayProto.push;
            var _result = original.apply(this, arguments);
            var _html = '';
            localChat.forEach(mes => {
                _html += mes.username + ':';
                _html += mes.text + '
'
; }) document.getElementById('chatContext').innerHTML = _html; return _result; } localChat.__proto__ = arrayMethod; //建立一个websocket,上面node里我们提到过,websocket只能传输字符串或者buffer,所以我们发送的数据要转换成字符串 var ws = new WebSocket("ws:127.0.0.1:4000"); //与服务器连接成功后向服务端发送一条数据 ws.onopen = function () { ws.send(JSON.stringify({ username: '会飞', mes: '' })) } //当从服务端接受到参数时,向localChat push一条数据,上面我们已经对localChat 的push方法重写,这时候页面会渲染 ws.onmessage = function (data) { localChat.push(JSON.parse(data.data)) } //监听点击事件,当点击发送时,像服务端发送一条数据; document.getElementById('send').onclick = function () { var _mes = document.getElementById('input').value; ws.send(JSON.stringify({ username: '会飞', mes: _mes })) }
script> body> html>

一个html页面就完成了,我们可以再复制一个,以便测试websocket是否能实时推送数据

四.成功连接

我们现在已经有一个node文件server.js和两个html文件
执行node server.js启动服务端,打开两个html文件,已经能够正常通信

浅尝websocket,node做websocket实现聊天室_第2张图片
浅尝websocket,node做websocket实现聊天室_第3张图片

浅尝websocket,node做websocket实现聊天室_第4张图片
浅尝websocket,node做websocket实现聊天室_第5张图片

[扩展]socket.io https://zhuanlan.zhihu.com/p/29148869

你可能感兴趣的:(javascript,javascript,node.js,websocket)