nodej.s 搭建一个socket服务（原生和sockjs）

牛牪犇0

已于 2023-02-06 15:43:16 修改

阅读量3.1k

点赞数 1

分类专栏：笔记文章标签： javascript 前端 npm

于 2023-02-06 14:14:33 首次发布

本文链接：https://blog.csdn.net/weixin_49549509/article/details/128900476

版权

笔记专栏收录该内容

61 篇文章 0 订阅

订阅专栏

文章详细介绍了如何建立原生WebSocket服务端和客户端，包括使用nodejs-websocket库创建服务器，以及客户端的JavaScript实现。接着，文章展示了使用sockjs作为非原生解决方案，提供跨浏览器的WebSocket支持，包括客户端和服务器端的设置。两个服务端在连接后都能进行消息广播。

摘要由CSDN通过智能技术生成

原生socket服务

步骤

新建一个文件夹
建立三个文件（依赖）

在这里插入图片描述
expressSocketSever.js
package-lock.json
package.json

3.打开编辑器终端，执行 npm i (或者yarn i ),前提是有包管理器npm或者yarn

客户端

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <input type="text" id="text">
  <button id="btn" type="button">发送</button>
 
  <script type="text/javascript">
    const ws = new WebSocket('ws://localhost:8080')
    // ws.onopen = function (e) {
    //   ws.send('来自客户端的信息')
    // }
    // ws.onmessage = function (e) {
    //   console.log(e.data);
    // }
    ws.onopen = function () {
      document.getElementById('btn').onclick = function () {
        ws.send(document.getElementById('text').value);
      }
    }
    ws.onmessage = function (e) {
      // document.body.innerHTML += `<p>${e.data}</p>`
      let p = document.createElement('p')
      p.innerHTML = e.data;
      // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
      document.body.appendChild(p);
    }
  </script>
</body>
 
</html>

服务端

const ws = require('nodejs-websocket');
  	const POST = 8080;
	//消息广播
	let connections = [];
	function broadcast(connections, msg) {
		connections.forEach(function(conn){
		conn.sendText(msg)})
	}
  	const server = ws.createServer(connect => {
		connections.push(connect)
	    connect.on("text", data => {
	      console.log("received: "+data);
	      connect.sendText(data);
		broadcast(connections,data)

	    });
	    connect.on("close", (code, reason) => {
	      console.log("connection closed!");
	    });
	    connect.on('error', ()=>{
	      console.log("connection error!");
	    });
  	});
	server.listen(POST, ()=>{
		console.log("websocket server start success!");
	});

服务地址为： ws://127.0.0.1:8080
端口号占用可以随意换

非原生，使用sockjs， http服务

建立步骤与原生相同，需要依赖，直接在前面建立的文件基础上新加

客户端

<!doctype html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>
    <style>
      .box {
          width: 300px;
          float: left;
          margin: 0 20px 0 20px;
      }
      .box div, .box input {
          border: 1px solid;
          -moz-border-radius: 4px;
          border-radius: 4px;
          width: 100%;
          padding: 0px;
          margin: 5px;
      }
      .box div {
          border-color: grey;
          height: 300px;
          overflow: auto;
      }
      .box input {
          height: 30px;
      }
      h1 {
          margin-left: 30px;
      }
      body {
          background-color: #F0F0F0;
          font-family: "Arial";
      }
    </style>
</head>
<body lang="en">
    <h1>Index</h1>
    <div id="first" class="box">
      <div></div>
      <form><input autocomplete="off" value="Type here..."></input></form>
    </div>
    <script>
        var sockjs_url = 'http://localhost:8080/echo';
        var sockjs = new SockJS(sockjs_url);
        $('#first input').focus();

        var div  = $('#first div');
        var inp  = $('#first input');
        var form = $('#first form');

        var print = function(m, p) {
            p = (p === undefined) ? '' : JSON.stringify(p);
            div.append($("<code>").text(m + ' ' + p));
            div.append($("<br>"));
            div.scrollTop(div.scrollTop()+10000);
        };

        sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};
        sockjs.onmessage = function(e) {print('[.] message', e.data);};
        sockjs.onclose   = function()  {print('[*] close');};

        form.submit(function() {
            print('[ ] sending', inp.val());
            sockjs.send(inp.val());
            inp.val('');
            return false;
        });
    </script>
</body>
</html>

服务端

var http = require('http');
var sockjs = require('sockjs');
var current = [];
var echo = sockjs.createServer();
echo.on('connection', function(conn) {
    current.push(conn)
    conn.on('data', function(message) {
      current.forEach((qq)=>  {
            // qq.write(JSON.stringify(message).replace(/\//g,''));
            qq.write(message);
            console.log(qq + conn + 'message')
      })
        
    });
    conn.on('close', function() {});
});

var server = http.createServer();
echo.installHandlers(server, {prefix:'/echo'});
server.listen(8080);