专栏首页前端说吧HTML5 - 开发一个自己的websocket服务器

HTML5 - 开发一个自己的websocket服务器

应用:node.js

主要步骤:

  • 创建文件夹
  • 创建app.js(server入口,app为自定义命名)
  • npm init -y (快速创建一个package.json文件)
  • 依赖包安装:nodejs-websocket (github安装讲解)
    • npm i nodejs-websocket
  • 依赖包在appjs中的使用 (github how to use讲解)

https://github.com/sitegui/nodejs-websocket#how-to-use-it

配置完毕后启动:

命令行输入>   node app.js (app这个名字不固定,具体看你的文件名叫啥)

服务端server.js 源码如下:

 1 const ws = require('nodejs-websocket');//引入依赖包
 2   const POST = 8080;//定义端口
 3 // 创建一个server
 4   const server = ws.createServer(connect => {
 5     //每次只要有新的用户加入,就会为当前用户创建一个connect对象,同时调用一下这个回调函数。
 6     console.log("New connection");
 7     
 8     // text事件:接收用户请求,得到用户传输进来的数据。
 9     connect.on("text", data => {
10       // 每当接受到用户请求事件,这个回调函数就会被触发。
11       console.log("Received "+data);
12       
13       // sendText/send 方法:接受到请求后,响应一个数据给用户。因为是connect调用,所以只给当前connet对应的用户发送,如果需要给所有用户发送(广播),需要connections这个数组
14       connect.sendText(data.toUpperCase()+"!!!");//如果直接返回一个data,就会像echo那个服务器一样的功能,接收到什么就返回什么
15     });
16     
17     // 连接断开 触发close事件
18     connect.on("close", (code, reason) => {
19       console.log("connection closed");
20       code && console.log(code);
21       reason && console.log(reason);
22     });
23     
24     // error:监听服务异常事件,放置因报错而断掉整个服务。
25     connect.on('error', ()=>{
26       // 如果触发了close事件,就会走error异常事件(刷新也会),所以必须加error
27       console.log('连接出现异常');
28     });
29   });
30 server.listen(POST, ()=>{
31     console.log('webSocket服务启动成功了,监听了端口'+ POST);
32 });

客户端demo使用上述配置的服务器。 源码如下:

示例页面代码html:

1   <div class="demo">
2     <input type="text" placeholder="请输入要发送的内容" id="ipt">
3     <button id="btn">发送请求</button>
4     <p>
5       响应结果如下:
6     </p>
7     <div id="rst"></div>
8     <button id="closeBtn">断开连接</button>
9   </div>

示例页面代码js:

 1 // var websocket = new WebSocket('ws://echo.websocket.org');// 使用ws官方提供的服务器
 2 var websocket = new WebSocket('ws://localhost:8080'); // 使用我自己配置的服务器,前提要去websocketServer文件夹中把服务启动一下:node server.js
 3 websocket.addEventListener('open', function (e) {
 4     console.log(e, websocket.readyState);
 5     // websocket.send('发送一个方法')
 6     // websocket.send('xing.org1^')
 7     btn.onclick = function (a) {
 8       // console.log(a)
 9       websocket.send(ipt.value);
10     }
11   });
12 // 接收返回值:
13   websocket.addEventListener('message', (e) => {
14     console.log(e);
15     rst.innerHTML = e.data;
16   });
17 closeBtn.onclick = function (e) {
18     console.log(e);
19     websocket.close(3000,'主动请求断开连接吧');//断开连接
20   }
21   websocket.addEventListener('close', function (e) {
22     console.log('连接断开了', e);
23   }); 

connections实现聊天室广播:

即给所有的用户(server.connections)都发送消息(sendText):

function broadcast(server, msg) {// 广播函数

  server.connections.forEach(function (conn) {
    conn.sendText(msg)

  })

}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Echarts - 树图实现四个层级

    我相信很多人和我一样,制作echats图标时,都会先去demo官网找相同的或者近似的效果,然后再此基础上改进成我们想要的那个。

    xing.org1^
  • JS-流程控制汇集

    xing.org1^
  • 【python系统学习15】数据类型 - 元祖(tuple)

    它的用法和列表用法类似,主要区别在于列表中的元素可以随时修改,但元组中的元素不可更改。

    xing.org1^
  • 那些值得一用的JS库

    如果你是一个npm作者,强烈推荐使用np模块,它能为你轻而易举地解决更新版本、添加git发布tag和发布代码到npm,特别是当你有很多npm模块要维护的时候。

    代码拾遗
  • 那些年不加班的开发团队的秘密,原因竟是因为持续集成!

    持续集成,让很多开发团队又 「 爱 」 又 「 恨 」 。爱,在于整个流程对项目的交付价值大有裨益,尽最大可能地减少不必要的加班;恨,在于成本过大,部署的困难、...

    架构师小秘圈
  • 程序员如何才算真正的高效编程?

    软件工程师为了准备面试,常常需要花费大量时间练习编程问题,同时还需要完善简历。然而,当他们最终拿下创业公司、谷歌、亚马逊或其他公司的工作后,才发现辛辛苦苦积累...

    腾讯大讲堂
  • 「转自 InfoQ」Rust:一个不再有 C/C++ 的,实现安全实时软件的未来

    Rust 作为新兴编程语言深受 Haskell 和 OCaml 等函数式编程语言的影响,使得它在语法上与 C++ 类似,但在语义上则完全不同。Rust 是静态类...

    MikeLoveRust
  • 当我们谈论Unit Test时我们在谈论什么?

    直译:面向独立单元的测试方法。 单单这一句话我们心里有就有了疑问:什么是独立单元,或者什么样的代码才算一个独立单元? 为了回答这个问题,这里引用一下wikipe...

    小老鼠
  • Node + Express + Mysql的CMS小结

    因为之前用过上述的组合完成过很多系统,而这一次是为了实现一个帮助系统的静态网页发布。因为很久不写,重点说遇到的几个坑:

    meteoric
  • 做这题的时候对比了一下之前的代码,为什么差距这么大?

    今天是LeetCode专题的第40篇文章,我们一起来看的是LeetCode中的71题Simplify Path,中文名是简化路径。

    TechFlow-承志

扫码关注云+社区

领取腾讯云代金券