http协议单向请求,只能客户端向服务器发送消息,然而websocket一旦双方建立连接就可以双方通信,更加深层次的用法是websocket可以做基础,然后不同的客户端可以通过websocket连接可以实现实时通信,同时结合webrtc相关技术可以实现音视频的双向连接。

在此只做简单的websocket连接。

需要安装ws: npm install ws 

 客户端代码:

   index.html:

<html lang="en">
<head>
<meta charset="utf-8">
<meta id="theme-color" name="theme-color" content="#fff">
<base target="_blank">
<title>WebSocket</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<button id="connectButton">Connect</button>
<button id="disconnectButton" disabled>Disconnect</button>
<div id="sendText">
<label for="textInput">Send text:</label>
<input id="textInput" type="text" />
</div>
<button id="sendButton" disabled>Send</button>
<div id="output">
<label for="log">Response:</label>
<div id="log" class="log"></div>
</div>
<script src="main.js"></script>
</div>
</body>
</html>
 
main.js:
'use strict';
var ws, serverInput, textInput, log,
connectButton, disconnectButton, sendButton;
serverInput = document.getElementById('serverInput');
textInput = document.getElementById('textInput');
log = document.getElementById('log');
connectButton = document.getElementById('connectButton');
disconnectButton = document.getElementById('disconnectButton');
sendButton = document.getElementById('sendButton');
connectButton.addEventListener('click', clickConnect, false);
disconnectButton.addEventListener('click', clickDisconnect, false);
sendButton.addEventListener('click', clickSend, false);
function clickConnect() {
ws = new WebSocket("ws://127.0.0.1:8888");
ws.onopen = function(evt) {
logMessage('', 'Connected');
connectButton.disabled = true;
disconnectButton.disabled = false;
sendButton.disabled = false;
};
ws.onclose = function(evt) {
logMessage('err', 'Disconnected');
connectButton.disabled = false;
disconnectButton.disabled = true;
sendButton.disabled = true;
};

//客户端接收到服务端返回的信息

ws.onmessage = function(evt) {
logMessage('msg', 'Received: ' + evt.data);
};
ws.onerror = function(evt) {
logMessage('err', 'Error: ' + evt.data);
};
}
function clickDisconnect() {
ws.close();
}
function clickSend() {
logMessage('send', 'Sent: ' + textInput.value);
ws.send(textInput.value);
}
function logMessage(type, msg) {
log.innerHTML += '<p class="' + type + '">' + msg + '</p>';
}
服务端代码
index.js:
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8888 });
// 一旦与之连接就出发connection事件
wss.on('connection', function (ws) {
console.log("connected");
// 客户端反馈给服务端的信息
ws.on('message', function (message) {
// 服务器给用户反馈会信息
ws.send(message);
console.log(message);
});
})
console.log("websocket server running at ")

node搭建简易的websocket服务的更多相关文章

  1. 使用ruby搭建简易的http服务和sass环境

    使用ruby搭建简易的http服务和sass环境 由于在通常的前端开发情况下,我们会有可能需要一个http服务,当然你可以选择自己写一个node的http服务,也比较简单,比如下面的node代码: v ...

  2. nodejs搭建简单的websocket服务端

    创建websocket服务端使用了nodejs-websocket ,首先要安装nodejs-websocket,在项目的目录下: npm install nodejs-websocket 1.搭建w ...

  3. 【从零开始】用node搭建一个jsonp&json服务

    目录: 一.介绍 二.node安装 三.webstorm配置node环境 四.代码介绍 五.如何使用 六.自定义域名 七.其他 一.介绍 1.背景     日常工作中,跟后端商定好接口格式后:通常采用 ...

  4. nodejs搭建简易的rpc服务

    这里主要使用的是jayson包,使用jayson实现rpc server端十分简单,如下: var jayson = require('jayson') // create a server var ...

  5. go服务端----使用dotweb框架搭建简易服务

    使用dotweb框架搭建简易服务 go语言web框架挺多的,所谓琳琅满目,里面也有很多优秀的,比如echo.beego等,但体验下来,总是觉得哪里有点小疙瘩,后来才明白过来,echo太简单,很多日常使 ...

  6. 使用node搭建服务时,服务可以启动,但是无法访问

    一开始搭建的是没有问题,能够正常启动和访问,然后吃了个饭回来就变成只能启动,浏览器访问不了了. 说真的,这是一个常识问题.使用node搭建服务访问本地文件,服务搭建的没有问题,能够正常启动.但是在浏览 ...

  7. Netty 搭建 WebSocket 服务端

    一.编码器.解码器 ... ... @Autowired private HttpRequestHandler httpRequestHandler; @Autowired private TextW ...

  8. 搭建微信小程序服务

    准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书. 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可 ...

  9. 腾讯云&搭建微信小程序服务

    准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书. 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可 ...

随机推荐

  1. 报表工具highcharts使用心得

    公司让做一个报表页面,搜索了下发现highcharts比较符合业务需求,下面就说一下使用心得. $('#container').highcharts({ title: { text: '部门统计图' ...

  2. dsp 28335 ConfigCpuTimer()详细介绍

    我自己的理解:写的不一定对,还请多指教: 从网上看到的好多都是复制粘贴的一个版本,感觉不太对 图上的是系统时钟(SYSCLKOUT)=75MHz; ConfigCpuTimer(&CpuTim ...

  3. python3.5+selenium3环境搭建

    windows环境下的操作(例子中的浏览器以火狐浏览器为例,IE和谷歌与此浏览器同理): 准备工具如下: 下载python[python开发环境]:http://python.org/getit/ 下 ...

  4. 结对作业_core组

    github地址:https://github.com/ljw-wakeup/expression_project2 对于这种结对的工作,由于有过电子设计实践的基础,大概知道建一个工程需要做的事,有点 ...

  5. Python 12306登陆详细分析及操作

    前面的话: 1.第一次尝试爬虫,登陆12306,有不足的地方,望大家留言告知,谢谢. 2.前面引入了一个requests模块,我不多说,大家都知道干啥的.还有config是我的一个配置文件,因为其中涉 ...

  6. Jsの练习-数组常用方法 -forEach()

    forEach()  : 对数组进行遍历循环,对数组中的每一项运行给定函数. 格式: arr.forEach(function(value,index){}) <!DOCTYPE html> ...

  7. ubuntu的安装与vim(部分)文件的配置

    Ubuntu的安装与vim相关的配置 虚拟机环境的安装(先说说虚拟机的安装步骤把) 对于安装ubuntu来讲不是很难掌握,但是在Linux系统虚拟机下提供了很多便利的手段,而要配置一个顺手的虚拟机环境 ...

  8. jmeter之关联

    前言:当请求之间有依赖关系,比如一个请求的入参是另一个请求返回的数据,这时候就需要用到关联处理,Jmeter可以通过“后置处理器”中的“正则表达式提取器”来处理关联. 一.后置处理器-------正则 ...

  9. Holer实现手机APP应用外网访问本地WEB应用

    手机APP应用公网访问内网WEB应用 本地安装了WEB服务端,手机APP应用只能在局域网内访问本地WEB,怎样使手机APP应用从公网也能访问本地WEB? 本文将介绍使用holer实现的具体步骤. 1. ...

  10. HashMap(1.8)理解

    先放一个流程图了解一下HashMap的put()操作: 1.HashMap底层采用数组.链表.红黑树来实现. 2.表的长度一定是2^n(便于快速计算hash值和扩展),若初始化时指定容量不满足,则Ha ...