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

Bettyaner

已于 2022-04-14 10:33:26 修改

阅读量3.5k

点赞数

分类专栏： javascript 文章标签： javascript node.js websocket

于 2022-03-21 17:16:09 首次发布

本文链接：https://blog.csdn.net/weixin_67585820/article/details/123636892

版权

javascript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

一.websocket简介

WebSocket是基于TCP的应用层协议，用于在C/S架构的应用中实现双向通信。
需要特别注意的是：虽然WebSocket协议在建立连接时会使用HTTP协议，但这并不意味着WebSocket协议是基于HTTP协议实现的。
在这里插入图片描述

二.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 + '</br>';
            })
            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文件，已经能够正常通信

在这里插入图片描述

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

Bettyaner

关注

0
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
浅尝websocket,node做websocket实现聊天室

做一个简单的尝试，node和客户端能够成功链接并且能正常接收发送数据。一.websocket简介WebSocket是基于TCP的应用层协议，用于在C/S架构的应用中实现双向通信。需要特别注意的是：虽然WebSocket协议在建立连接时会使用HTTP协议，但这并意味着WebSocket协议是基于HTTP协议实现的。二.node实现//node 不支持websocket，需要安装支持websocket的包，这里用的是"nodejs-websocket"，
复制链接

扫一扫

专栏目录