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>