websocket demo

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() {
      //判断当前浏览器是否支持WebSocket
      if ('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）

前端代码：