使用python的tornado实现websocket的后端使用vue实现websocket的前端

看文章必读

这个文章所涉及的技术并不是很理解，但是主要是实现一个前后端实现通信的功能！

vue部分实现前端的websocket

1. 首先要通过 new WebSocket(“服务器地址”) 进行连接 将websocket赋值给 ws
2. this.ws.onopen 指定的是监听连接成功后执行的函数
3. this.ws.onmessage 指定的是监听服务器返回消息的函数
4. this.ws.onerror 指定的是连接出错的函数
5. this.ws.onclose 指定连接关闭的函数

代码：

	initWebSocket() {
		this.ws = new WebSocket("ws://127.0.0.1:8001/websocket/")
		this.ws.onopen = function() {
			console.log('连接成功')
		}
		this.ws.onmessage = function(e) {
			console.log(JSON.parse(e.data))
		}
		this.ws.onerror = function(e) {
			console.log(e)
		}
		this.ws.onclose = function() {
			console.log('连接关闭')
		}

	},
	send(flag) {
		this.ws.send(flag)
	},
			
	disconn() {
		this.ws.close()
	} 

tornado 实现后端的websocket

这一部分通过视频敲的，很多知识点不清除具体的含义，但是有自己的理解

1. 需要引入的库

Application 是指定类似于路由的功能 （具体代码在下面）
.
IOLoop 应该是开始一个后端的服务IOLoop.instance().start()
搜到的解释：启动服务器之后，还需要启动 IOLoop 的实例，这样可以启动事件循环机制，配合非阻塞的 HTTP Server 工作。
.
WebSocketHandler 需要实现的类 要继承WebSocketHandler
.
pymysql 因为tornadb不支持python3的pymysql，修改其源码也报错频繁，所以干脆使用这个库手撸sql

from tornado.web import  Application
from tornado.ioloop import IOLoop
import os
from tornado.websocket import WebSocketHandler
import pymysql

import json

2. 路由部分代码:

将这一部分理解成django的urls路由层
app.listen(端口) 开始监听一个端口

app = Application([
    (r'^/websocket/$', SocketHandler),
], template_path=os.path.join(os.getcwd(), 'templates'))
app.listen(8001)

3. 视图部分代码：

open —— 监听客户端连接的，当有客户端成功连接触发
on_message —— 监听客户端发送的消息
on_close —— 监听客户端断开连接触发
check_origin —— 判断源的，可以通过始终返回True解决跨域问题
self.write_message() —— 向客户端返回消息

class SocketHandler(WebSocketHandler):
	# 监听客户端连接的，当有客户端成功连接触发
	def open(self, *args, **kwargs):
		pass
		
	# 监听客户端发送的消息
	def on_message(self, message):
		# 向客户端返回消息
		self.write_message('我收到消息了')  # 传输json字符串
	
	# 监听客户端断开连接触发
	def on_close(self):
		pass
	
	# 判断源的，可以通过始终返回True解决跨域问题
	def check_origin(self, origin):
        return True

ok 就这些，主要是要完成某些逻辑需求，所以草草学习一下!