git

node.js创建websocket 的服务

Nodejs Websocket包

ws.createServer([options], [callback])
The callback is a function which is automatically added to the “connection” event.

前端代码

1. 创建实例、打开连接
this.websocket = new WebSocket('ws://127.0.0.1:8001');
# 实例回调
1.1 连接成功
this.websocket.onopen = () => {this.setMessageInnerHTML('WebSocket连接成功');
};
1.2 接收服务端消息
this.websocket.onmessage = (event) => {this.setMessageInnerHTML(event.data);
};
2. 关闭连接
this.websocket.close();
3. 发送消息
this.websocket.send(message);

完整代码

后端

var ws = require('nodejs-websocket');
console.log('开始建立连接...')ws.createServer(function (conn) {conn.on('text', function (str) {// 收到文本时触发，str 时收到的文本字符串console.log('浏览器给服务端收到的信息为:' + str)conn.sendText('服务器返回内容')})conn.on('close', function (code, reason) {console.log('关闭连接', code, reason)});conn.on('error', function (code, reason) {// 发生错误时触发，如果握手无效，也会发出响应console.log('异常关闭', code, reason)});
}).listen(8001)
console.log('WebSocket建立完毕');

前端

<template><div><hr /><button @click="openWebSocket">打开WebSocket连接</button><hr />Welcome<br /><input id="text" type="text" /><button @click="send">发送消息</button><hr /><button @click="closeWebSocket">关闭WebSocket连接</button><hr /><h1 id="message"></h1></div>
</template><script>
export default {data() {return {websocket: null,};},mounted() {this.openWebSocket();},methods: {//将消息显示在网页上setMessageInnerHTML(innerHTML) {document.getElementById('message').innerHTML += innerHTML + '<br/>';},//关闭WebSocket连接closeWebSocket() {this.websocket.close();},//发送消息send() {var message = document.getElementById('text').value;this.websocket.send(message);},//打开WebSocket连接openWebSocket() {//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {this.websocket = new WebSocket('ws://127.0.0.1:8001');} else {alert('当前浏览器 Not support websocket');}//连接发生错误的回调方法this.websocket.onerror = () => {this.setMessageInnerHTML('WebSocket连接发生错误');};//连接成功建立的回调方法this.websocket.onopen = () => {this.setMessageInnerHTML('WebSocket连接成功');};//接收到消息的回调方法this.websocket.onmessage = (event) => {this.setMessageInnerHTML(event.data);};//连接关闭的回调方法this.websocket.onclose = () => {this.setMessageInnerHTML('WebSocket连接关闭');};//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = () => {this.closeWebSocket();};},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

也可以在前端引入socket.io的cdn，后端用express搭建（也要require socket.io）

前端代码：

websocket demo相关推荐

大道至简知易行难 C# 完成WebSocket demo 用GoEasy实现Hello world
在现在Time cost和Labor cost进入项目并占据重要位置的开发理念里,当一款项目的目标.理念以及开发的要求非常明确时,怎样减少时间.人力成本以及降低开发风险以及成为一个项目在开发初期需要确 ...
C# 完成WebSocket demo 用GoEasy实现Hello world
在现在Time cost和Labor cost进入项目并占据重要位置的开发理念里,当一款项目的目标.理念以及开发的要求非常明确时,怎样减少时间.人力成本以及降低开发风险以及成为一个项目在开发初期需要确 ...
大道至简知易行难 JAVA 完成WebSocket demo 用GoEasy实现Hello world
一个项目在方向.目标和运营理念已经定义了的时候,我们会去考虑项目本身的周期和开发成本.当然,所有的公司都会在项目能够达成目标的同时尽量减少人力成本和时间成本,其中,就会有用到三方的软件和框架. 大道至 ...
JAVA 完成WebSocket demo 用GoEasy实现Hello world
一个项目在方向.目标和运营理念已经定义了的时候,我们会去考虑项目本身的周期和开发成本.当然,所有的公司都会在项目能够达成目标的同时尽量减少人力成本和时间成本,其中,就会有用到三方的软件和框架. 大道至 ...
websocket demo，websocket封装，jquery下的websocket封装
一.websocket封装github地址:https://github.com/yquanmei/websocket-demo. 二.需求最近公司要求加入websocket的页面有点多,每次都重复 ...
websocket心跳链接代码_WebSocket原理与实践(五)--心跳及重连机制
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失.所以就需要 ...
用node实现websocket协议
协议 WebSocket是一种基于TCP之上的客户端与服务器全双工通讯的协议,它在HTML5中被定义,也是新一代webapp的基础规范之一. 它突破了早先的AJAX的限制,关键在于实时性,服务器可以主 ...
最近のWebSocket事情についてまとめとく
最近のWebSocket事情についてまとめとく HTML5, WebSocket id:Jxck(@Jxck_)さんからのリクエストもありましたので.現状でのWebSocket情報をまとめておきます. ...
HTML5 WebSocket之HelloWorld
原文http://fallenlord.blogbus.com/logs/110768932.html 方案要实现一个WebSocket有很多方案,客户端方面可以用原生的WebSocket对象,也可 ...

websocket demo

node.js创建websocket 的服务

前端代码

完整代码

websocket demo相关推荐

最新文章

热门文章