做一个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

浅尝websocket,node做websocket实现聊天室相关推荐

websocket + node 手把手实现简陋聊天室
在这一篇文章中,我将会先对 websocket 做一个简单的介绍:然后使用 node + websocket 做一个极其简陋的聊天室:最后在将这个简陋的聊天室通过 websocket 框架 -- so ...
SpringBoot入门建站全系列（二十七）WebSocket做简单的聊天室
SpringBoot入门建站全系列(二十七)WebSocket做简单的聊天室一.概述 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 ...
基于Tomcat7、Java、WebSocket的服务器推送聊天室
2019独角兽企业重金招聘Python工程师标准>>> 基于Tomcat7.Java.WebSocket的服务器推送聊天室转载于:https://my.oschina.net/u/ ...
基于 SpringBoot+WebSocket 无DB实现在线聊天室（附源码）
文章目录基于 SpringBoot+WebSocket 无DB实现在线聊天室 0 项目说明 0.1 样例展示 0.2 源码地址 1 WebSocket 简介 1.1 HTTP 1.2 WebSock ...
WebSocket实现简单的web聊天室
WebSocket实现简单的web聊天室 1.需要Tomcat7.0所以服务器 2.需要JDK7.0 3.手工加入Tomcat7.0中lib目录下的一下三个包catalina.jar.tomcat-c ...
个人看法---如何做一个视频聊天室？
个人而言,做一个视频聊天室,是可以自己建的,不过比较废资源,也不一定做得好: 另外,可以考虑选用第三方即时通讯云的方式,也比较常见.不过这块要注意几个问题: 一.即时通讯云商是否掌握即时通讯核心技术, ...
WebSocket+Tomcat实现网页简易聊天室
简单的说一下什么是websocket,它是基于TCP的服务器与客户端之间全双工通信的一种协议,允许服务端主动推送消息给客户端,只需要一次握手,就可以在服务端和客户端之间建立持久相连接,在这里我们只用到 ...
websocket理论与实践--在线聊天室
1.websocket理论与实践 1.1.什么是websocket协议 Websocket是HTML5开始提供的一种在单个TCP连接上进行的全双工的网络通信协议 1.2.为什么要用websocket ...
HTML5 之WebSocket入门demo和简易聊天室
HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏 ...

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

一.websocket简介

二.node实现

三.客户端实现

四.成功连接

浅尝websocket,node做websocket实现聊天室相关推荐

最新文章

热门文章