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）

前端代碼：